StyleSeed brings designer judgment to AI-built dashboards with an engine-and-skins approach
StyleSeed packages 69 designer rules into an engine-and-skins system that makes AI-generated UIs cohesive, with CSS skins, CLI setup, and an MIT license.
Why the problem matters: AI builds components but not design judgment
When the author asked Claude Code to generate a dashboard, the AI produced functional components that worked—but the result looked amateur: inconsistent card spacing, a flat typographic hierarchy, and a scatter of colors that made the interface feel unrefined. The issue was not component quality; it was the absence of high-level design decisions that experienced designers apply instinctively. StyleSeed was born from that gap: a way to encode a designer’s judgment so AI can apply the same standards repeatedly across pages and projects.
What StyleSeed is and how it is structured
StyleSeed is presented as a split system: an engine that contains written design rules and reusable components, and a set of skins that provide brand-specific color and token overrides. The repository structure described by its creator shows the engine and skins as separate directories—engine contains the “design brain” while skins hold brand color themes such as Toss, Stripe, Linear, Vercel, and Notion. The engine is described as including 69 rules, 48 components, and 11 AI skills, and skins are implemented as single CSS files that swap the visual identity by changing a small set of variables (for example, –brand values).
The engine is intended to encode guidance about layout, typography ratios, card structure, visual rhythm, and patterns that should be avoided; it does not embed brand identity. A skin injects brand values so the same structural rules render distinctly for different brands.
Examples of the design rules kept in the engine
The project enumerates specific, repeatable choices that a design team might make instinctively. Among the explicit rules called out in the source material:
- The darkest black used in UI is not pure black (#000) but a softer tone such as #2A2A2A to avoid harsh contrast.
- Only one accent color is used across the UI; the rest of the palette is grayscale to create restraint.
- Card shadows are extremely subtle—around 4% opacity—so that visible shadows are minimized.
- Typography follows consistent ratios: a 48px number paired with a 24px unit (a 2:1 relationship) so numeric hierarchy is predictable.
- Layout rhythm rules include avoiding repeated identical card layouts in sequence: alternate hero, grid, chart, list to create a readable visual cadence.
- When multiple KPI cards appear, variation is recommended—mix trend arrows, progress bars, and comparison text to avoid mechanical uniformity.
- Content density increases as users scroll: hero sections use large numeric display (48px) while lower areas use small detail rows (14px), producing a natural information pyramid.
These are presented as machine-readable or human-readable judgments the AI can follow when generating screens.
How the engine-and-skins workflow works in practice
The creator describes a simple three-step workflow for adopting StyleSeed in a project:
- Copy the engine files into the project so the design brain and component styles live in the app’s codebase. The example shows copying engine assets into a my-project directory and copying the engine’s CSS into my-project/src/styles.
- Pick a skin by copying a skin CSS file into the project’s theme—for example, a skin for Stripe or Toss—so one CSS variable change propagates the brand across the UI (the source shows examples like –brand: #533afd for one skin and –brand: #721FE5 for another). The author references an external collection of brand identities (awesome-design-md) as a source of additional skins.
- Build: invoke the project-level UI assistant and prompt the AI to create a page. The project includes an interactive UI setup command (shown as /ui-setup) that walks the developer through app type, colors, and font choices and generates an initial page.
Beyond the generator prompt, the system also exposes utility commands that emulate tasks typically performed by a designer or UX researcher. Examples shown in the source include commands that operate against source files such as src/Dashboard.tsx: /ux-audit (a heuristic check), /ux-copy (auto-generate button labels and error messages), /ux-feedback (add loading/error/empty states), and /ui-review (design compliance checks). The author reports that the AI will read a CLAUDE.md file automatically and follow the 69 rules when laying out a hero card, KPI grid, chart section, and activity list in information-pyramid order.
Practical details: files, tokens, and skins
StyleSeed’s skin model is intentionally lightweight: a single CSS file can propagate a brand’s visual identity by defining a small set of variables (the source shows the example of –brand set to different hex colors). The engine itself is described as containing components and CSS that enforce the structural rules, while skins override color and token values. The author packaged their set of rules and components so that designers’ choices travel with code rather than being reinterpreted by an AI on each run.
The repository is available under an MIT license; the author notes it was developed initially for a personal app and published so others can reuse the same rule set and skins.
Limitations and current scope
The author is explicit about the current boundaries of StyleSeed. The system is presently mobile-first and optimized for a 430px viewport. Desktop layouts require additional work and do not yet receive the same automated treatment. Charting is a semi-manual step: charts require separate setup with Recharts (the author says charts need manual Recharts setup). The project is actively evolving—the author states they are still adding and refining rules—so the engine is not a finished, catch-all solution.
These limitations are described candidly: StyleSeed improves the quality of AI-generated interfaces but does not replace manual adjustments or continued rule refinement.
Why consistent judgment produces the feeling of cohesion
The central argument for StyleSeed is that cohesion across an app arises from the repeated application of the same small judgment calls—not from a single flashy component. The author uses the Toss app (described as Korea’s biggest fintech) as an example: despite many screens, the product feels like “one app” because a team applied consistent spacing, color restraint, shadow subtlety, and typographic ratios everywhere.
StyleSeed attempts to capture that one-team consistency in a machine-readable way. By encoding spacing, size ratios, color restrictions, and forbidden patterns, the engine ensures that AI-generated pages adhere to the same standard. Swap skins and the visual identity changes, but the structure and judgment stay consistent.
How StyleSeed integrates with AI-driven UI generators
The source emphasizes that the problem is not AI’s inability to produce components but AI’s lack of ingrained design judgment. StyleSeed’s approach—documenting and packaging the judgment—lets the AI follow an established set of rules. The author describes the AI reading a CLAUDE.md file automatically and then producing a dashboard with ordered sections (hero card, KPI grid, chart, activity list). Commands exposed in the project perform designer-or researcher-like tasks such as heuristic UX audits, generating copy, adding empty/loading/error states, and verifying design compliance against the rule set.
This integration model positions StyleSeed as a companion to generator AIs: the AI handles component generation and code scaffolding while StyleSeed enforces layout, hierarchy, and visual restraint.
Who can benefit from StyleSeed and where it fits in a workflow
StyleSeed is positioned as a practical tool for builders who rely on AI to accelerate UI development and want to avoid the familiar “works but looks amateur” problem. The author’s stated audience includes developers or teams building an app who prefer to spend minimal time fixing visual output. Because the package includes an engine of rules and a set of skins, it’s intended for projects that can accept the engine’s opinionated layout and typography choices.
Adoption pattern in the source suggests a short setup time—copy the engine and a skin, run the /ui-setup, and let the AI generate initial pages—after which teams can iterate on charts, desktop layouts, and any domain-specific adjustments.
Implications for designers, developers, and product teams
Encoding design judgment as a reusable engine invites changes to design and development workflows. For designers, StyleSeed formalizes many small decisions that typically live in a design system or a style guide, making them both machine-readable and enforceable by AI. For developers, it offers a way to shortcut repeated visual fixes after AI generation by swapping in a prescribed set of rules. Product teams gain faster initial UIs that maintain consistent structure across pages.
At the same time, the author’s transparency about the project’s scope underscores that such automation complements rather than replaces human work: desktop layout refinement, chart wiring, and continued rule curation remain necessary. The approach suggests a hybrid workflow where AI scaffolds interfaces and a compact set of design judgments—documented and versioned—controls the final visual language.
Open-source distribution and community resources
The project is shared under an MIT open-source license and hosted publicly (the author includes a GitHub repository link). The author also points to a community resource—awesome-design-md—that the project leverages for additional skin identities; that collection contains dozens of brand identity presets the author notes can be used as skins.
Design trade-offs and the importance of restraint
A recurring theme in the source material is the value of restraint: limiting accent colors, softening blacks, reducing shadow prominence, and preserving typographic hierarchy are all small decisions that add perceived polish. The project’s rules emphasize subtle adjustments rather than dramatic visual flourishes. That philosophy is pragmatic for AI-generated UIs because small, consistent rules reduce the need for repeated manual cleanup.
How to try StyleSeed in a project today
The author describes a concrete path to experiment with StyleSeed: copy the engine files into a project, copy a skin CSS file into the theme, run the provided UI-setup assistant to establish app type and tokens, then prompt the AI to generate an initial page. The system’s CLI-like helper commands perform automated UX audits, copy generation, state handling additions, and design compliance reviews against the engine’s rule set. These steps are presented as a way to go from messy AI output to a cleaner, more cohesive UI in minutes rather than hours.
A realistic appraisal: where human input remains necessary
StyleSeed reduces repetitive design fixes, but the author is clear that it’s not a turn-key replacement for designers. Mobile-first coverage at 430px is complete; desktop requires additional engineering and design attention. Charts must be wired in manually using Recharts. The engine is actively evolving as the author adds more rules and refines behavior. The honest appraisal in the source frames StyleSeed as a practical utility to speed initial UI production, with human oversight required to finish and polish more complex layouts.
The project’s origin story—built to solve the author’s own frustration with AI-generated but visually inconsistent dashboards—anchors its value proposition: a small catalog of design rules, expressed in code, can dramatically improve the quality of automated UI output.
StyleSeed’s approach surfaces a broader point about tooling: machine generation becomes far more valuable when paired with a compact set of organizational decisions that ensure consistency across pages and screens. That model is likely to influence how teams adopt AI tooling: not as a standalone authoring engine, but as a generator that consumes and adheres to a shared design brain.
Looking ahead, the same pattern—capturing expert judgment in machine-readable form—could be applied to other areas of product design, from copy style to accessibility heuristics. The author’s release under an MIT license and the repository’s public availability mean teams can experiment with the engine-and-skins paradigm, extend the rule set, contribute new skins, and tailor the approach to their own product constraints.
StyleSeed’s immediate utility is practical: reduce the time spent fixing visual inconsistencies from AI output, give AI a consistent set of design rules to follow, and provide a lightweight skinning mechanism so a single structure can serve multiple brand identities. The project demonstrates that modest, intentional design constraints—documented and enforced—can transform the aesthetics of machine-generated interfaces without requiring a full design system or a large design team.
