design-system-builder
- Repo stars 0
- Author updated Live
- Author repo skills-registry
- Domain
- Design
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @tomevault-io · no license declared
- Token usage
- Lean
- Setup complexity
- Plug-and-play
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- No special requirements
- Permissions
-
- Read-only
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: design-system-builder
description: Generates the full visual language (color palette, typography, spacing grid, elevation, interact…
category: design
runtime: no special runtime
---
# design-system-builder output preview
## PART A: Task fit
- Use case: Generates the full visual language (color palette, typography, spacing grid, elevation, interactive states) for a website based on a chosen mood. Supports 8 design moods from warm luxury to playful to corporate. Runs after nextjs-scaffold..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “When to use / When NOT to use / Inputs” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Generates the full visual language (color palette, typography, spacing grid, elevation, interactive states) for a website based on a chosen mood. Supports 8 design moods from warm luxury to playful to corporate. Runs after nextjs-scaffold.”.
- **02** When the source has headings, the agent prioritizes “When to use / When NOT to use / Inputs” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files.
Start with a small task and check whether the result follows “When to use / When NOT to use / Inputs”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: design-system-builder
description: Generates the full visual language (color palette, typography, spacing grid, elevation, interact…
category: design
source: tomevault-io/skills-registry
---
# design-system-builder
## When to use
- Generates the full visual language (color palette, typography, spacing grid, elevation, interactive states) for a webs…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “When to use / When NOT to use / Inputs” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "design-system-builder" {
input -> user goal + target files + boundaries + acceptance criteria
context -> When to use / When NOT to use / Inputs
rules -> SKILL.md triggers / order / output contract
runtime -> no special runtime | read files, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} design-system-builder
Applies a cohesive design system to the project. One skill, 8 moods, infinite variations.
When to use
- Right after
nextjs-scaffoldhas set up the project - When user wants to change the whole site's visual direction
- When restyling an existing site to a new mood
When NOT to use
- User wants one-off style changes (just edit the file directly)
- User has a detailed design spec from a designer (follow that instead)
Inputs
From site-plan.md:
mood(one of 8 - seereferences/palettes.md)vertical(for font fine-tuning)
Output
Updated files:
src/app/globals.css- palette + typography + spacing tokenssrc/lib/constants.ts- brand colors as constants (optional)- Design tokens documented in a comment block
The 8 moods
1. Warm luxury
- Palette: cream
#FDF8F0, gold#C9A96E, charcoal#2C2418, taupe#D4C5B2 - Fonts: Bodoni Moda (display) + Inter (body)
- Feel: fine dining, spa, boutique
2. Dark luxury
- Palette: near-black
#0A0A0A, gold#D4AF37, cream#F5F0E6, taupe#4A4035 - Fonts: Playfair Display (display) + Inter (body)
- Feel: cocktail bars, jewelers, fine dining
3. Coastal luxury
- Palette: white
#FEFEFE, deep navy#1B3A5B, sand#E8DCC4, seafoam#A8C8BF - Fonts: Cormorant Garamond (display) + Inter (body)
- Feel: resorts, seafood, yacht clubs
4. Earthy luxury
- Palette: deep forest
#2D3E2C, cream#F7F3E8, terracotta#C87E4F, moss#8B9A6B - Fonts: Playfair Display (display) + Inter (body)
- Feel: farm-to-table, wellness retreats, eco lodges
5. Modern minimal
- Palette: off-white
#FAFAFA, near-black#1A1A1A, single accent (electric blue#0057FFor neon green#00D8A8) - Fonts: Inter (single font, multiple weights) OR Space Grotesk
- Feel: SaaS, agencies, portfolios
6. Bold editorial
- Palette: pure white
#FFFFFF, pure black#000000, single vivid accent (magenta#EC008Cor electric yellow#FFD600) - Fonts: oversized serif like Fraunces or Canela (display) + Söhne or Inter (body)
- Feel: magazines, creative studios, restaurants with attitude
7. Playful
- Palette: pastel bright - peach
#FFB89C, mint#B4E4D0, butter#FFE699, dusty rose#EDA9B9 - Fonts: DM Serif Display or Fraunces Soft + Inter or DM Sans
- Feel: cafes, kids brands, casual dining, creator economy
8. Corporate
- Palette: navy
#0B2545, slate#5C6B7D, off-white#F4F6F8, accent blue#00B4D8 - Fonts: Inter (single) OR Source Sans Pro
- Feel: B2B SaaS, finance, healthcare, law
Procedure
Step 1: Read mood from site-plan.md
If no mood picked, ask AskUserQuestion with the 8 options. Show preview colors.
Step 2: Update globals.css
Replace the @theme inline block with the palette for the chosen mood. Keep the structure from nextjs-scaffold/templates/globals.css.template. Do NOT touch the force-override !important rules at the bottom.
Step 3: Update layout.tsx fonts
Replace the next/font/google imports to match the mood's font pairing. Use the variable: prop to wire them up to CSS vars.
Step 4: Add spacing + elevation tokens
In globals.css, add these tokens (8pt grid + 3-tier elevation):
@theme inline {
/* 8pt spacing grid */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 1rem; /* 16px */
--space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */
--space-6: 3rem; /* 48px */
--space-7: 4rem; /* 64px */
--space-8: 6rem; /* 96px */
--space-9: 8rem; /* 128px */
/* Elevation - adjust shadow color per mood */
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 12px 24px rgb(0 0 0 / 0.12);
}
Step 5: Add interactive state matrix
For each mood, document the state colors in globals.css comments:
/*
* Interactive states for this mood (warm luxury):
* default: gold
* hover: gold-dark
* focus: gold + 2px ring
* active: gold-dark + slight scale
* disabled: gold at 40% opacity
*/
Step 6: Reduced motion
Already handled in template globals.css. Verify @media (prefers-reduced-motion: reduce) block exists.
Step 7: Typography scale
Default scale for display fonts (mood-dependent):
- Hero:
text-5xl sm:text-6xl md:text-7xl lg:text-8xl - Section heading:
text-3xl md:text-4xl lg:text-5xl - Subsection:
text-xl md:text-2xl - Body:
text-base(16px) withleading-relaxed - Small:
text-sm - Micro:
text-xs uppercase tracking-[0.2em](for labels)
Editorial mood uses LARGER sizes (text-7xl hero minimum). Minimal uses SMALLER (text-4xl hero max).
Gotchas
The font-override
!importantrules are non-negotiable - see nextjs-scaffold Step 5.Color ramp matters - always include light + dark variants of your accent color (gold + gold-dark). Single-tone accents look flat.
Don't use 8 colors - the palette limits each mood to 4-5 core colors for a reason. Adding more muddies the brand.
Test contrast - run the accessibility-performance skill to verify WCAG AA (4.5:1 for body text, 3:1 for large text and UI).
Fonts cost performance - each
next/font/googleimport adds a request. Stick to 2 families max (display + body). Add script only if the mood requires it.Scripts/cursive fonts look cheap unless done well. If using Dancing Script for a "luxury" brand, make sure it's sparingly (logo area only). Bodoni italic is a better substitute in most cases.
References
See references/palettes.md for full hex codes, Tailwind configs, and sample mood boards.
Source: avien19/pro-site-builder — distributed by TomeVault.
Decide Fit First
Design Intent
How To Use It
Boundaries And Review