Design System Studio
Turn a brand brief into a coherent visual language. Choose Swiss Signal, Warm Editorial, or Nocturne Studio, then generate a DESIGN.md, design tokens, and an interactive specimen you can actually use.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/design-system-studio.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.0A closer look at the actual output.
One brief, three distinct visual languages. These are generated, editable specimens—not screenshots of another brand’s website.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
6 sections- Good work begins with a clear direction.
- Brand principles
- A palette with a purpose.
- Let the message lead.
- Small details. One language.
- Make it your own.
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 6 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- Good work begins with a clear direction.
- Clarity before noise
- A palette with a purpose.
- Let the message lead.
- Small details. One language.
- Make it your own.
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chromium
- Pinned dependency
- Zero runtime dependencies · original MIT source
- Checks completed
- Brief validation, token/document consistency, all three styles, responsive layouts, and interactive specimen controls.
Local workflow and browser checks; Codex tested with explicit SKILL.md invocation.
A starter design system and static specimen. It does not implement your application or certify every future color/component combination as accessible. Other agents and platforms remain untested.
From a good brief to a better result.
Turn a brand brief into a coherent visual language. Choose Swiss Signal, Warm Editorial, or Nocturne Studio, then generate a DESIGN.md, design tokens, and an interactive specimen you can actually use. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- Brand name, audience, personality, and product message
- One of three original art directions
What you’ll make
- DESIGN.md with design decisions and usage rules
- CSS and JSON design tokens
- Editable interactive HTML specimen in three original styles
The intended workflow
- Describe the brand and choose a visual direction
- Generate a new design system and specimen
- Inspect typography, color contrast, components, and responsive behavior