From ccube-ux-designers
Create or update a DESIGN.md file by browsing a design system's live online documentation (Storybook or equivalent) using the integrated browser. Use when the user asks to generate or update a DESIGN.md from a design system's documentation URL.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ccube-ux-designers:cc-design-mdThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill produces a validated `DESIGN.md` file by reading values directly
This skill produces a validated DESIGN.md file by reading values directly
from a design system's live online documentation using the integrated browser.
A DESIGN.md is a plain-text design system document readable by both humans
and AI design agents (such as Google Stitch). It encodes a project's visual
identity — colours, typography, spacing, elevation, and component patterns —
in technology-agnostic design language with no code, no framework component
names, and no token variable syntax.
Every DESIGN.md follows this section order. Omit sections not covered by
the design system being documented, but preserve the order for sections that
are included.
| Section | What it contains |
|---|---|
| Overview | Personality and aesthetic intent in plain prose |
| Colors | Named colours with exact hex values and their semantic roles |
| Typography | Font families, size scale, weight usage per level |
| Elevation | How depth is conveyed — shadows, borders, surface layering |
| Spacing | Base grid and spacing scale in px with usage guidance |
| Components | Visual traits of key UI atoms (radius, border, padding, states) |
| Do's and Don'ts | Guardrails and common pitfalls |
Critical format rules (MUST follow):
Button.Default, Form.Input)Colour["text-primary"], spacing-16)#RRGGBB uppercase notation and be sourced from the
live documentation — never guessed or approximatedCollect the following before proceeding. Ask for any that are missing:
DESIGN.mdOpen the provided URL in the integrated browser. Wait for the page to fully load before proceeding.
If the page renders inside an iframe (common in Storybook), extract the iframe content using Playwright:
const iframe = page.frameLocator('iframe').first();
const content = await iframe.locator('body').innerText();
Before extracting values, map the available documentation sections to know which URLs to visit. Extract sidebar links from the navigation:
const links = await page.locator('nav a').all();
For Storybook sites, the story ID pattern is
/docs/<group>-<sub-group>--docs. Expand collapsed sections in the sidebar
by clicking their toggle buttons if links are not yet visible.
If a URL returns "Couldn't find story matching", the story ID is incorrect — go back to the sidebar and find the correct link by clicking through the navigation.
Navigate to the colours documentation for the target theme. Look for:
Extract the hex values for these roles at minimum:
| Role | What to look for in docs |
|---|---|
| Primary | The main brand / CTA colour (e.g. primary-50) |
| Secondary | Supporting interactive colour |
| Surface | Default page/card background (usually bg → white) |
| On-surface | Primary text colour on the surface |
| Neutral | Border and divider colour |
| Success | Positive state text or fill colour |
| Warning | Cautionary state text or fill colour |
| Error | Error state text or fill colour |
| Info | Informational state text or fill colour |
| Inverse surface | Dark background for inverted regions |
Validation rule: Every hex value in the DESIGN.md Colors section MUST appear verbatim in the browser-extracted text from the live documentation. Do not substitute values from memory.
Navigate to the font/typography documentation. Extract:
Map the extracted scale to these levels:
| Level | Typical size range |
|---|---|
| Page title | 32–48px |
| Section heading | 20–32px |
| Card heading | 16–22px |
| Body | 14–16px |
| Support text | 12–14px |
| Caption/label | 10–12px |
Navigate to the spacing documentation. Extract:
Present as a table in the DESIGN.md with columns: px value, use case.
Navigate to the radius/border documentation. Extract:
Navigate to the shadow documentation if available. Extract:
If no shadow docs exist, infer from card/modal component documentation.
Browse the component documentation for the following component groups and note visual traits (sizes, border widths, padding, corner radius, state colours). Do NOT note any code or prop names.
Priority component groups to check:
Compose the file following the section order in the Format Reference above.
For each section:
**Name** (#HEX): role description.
Include all roles identified in Step 4.Before writing the file, verify:
If any check fails, return to the relevant step and re-extract from the browser before writing.
The output should read like this (excerpt):
# Design System
## Overview
A calm, professional interface for Singapore Government digital services.
...
## Colors
- **Primary** (#1768BE): CTAs, active states, key interactive elements
- **Error** (#9E130F): Validation errors, destructive actions
...
## Typography
- **Headline Font**: Open Sans
- **Body Font**: Open Sans
Page titles use semi-bold at 40px. Section headings use semi-bold at 26px.
Body text uses regular at 16px. ...
## Elevation
Cards use a soft 4–8px diffuse shadow with a 1px light border (#E2E8F0).
...
## Spacing
Based on a 4px grid.
| Gap | Use for |
| ---- | ------------------------------ |
| 8px | Icon-to-label, heading binding |
| 16px | Card internal padding |
...
## Components
- **Buttons**: 8px corner radius. Primary uses solid brand blue fill
with white label. ...
...
## Do's and Don'ts
- Do use the primary colour only for the single most important action
per screen
- Don't mix rounded and sharp corner treatments on the same screen
| Pitfall | How to avoid |
|---|---|
| Using Tailwind CSS or Material palette hex values | Always source hex from the live browser output |
| Quoting React/Vue component names | Describe visual traits in plain English only |
Using token variable syntax like spacing-16 | Write "16px" instead |
| Storybook story ID 404 errors | Click through the sidebar to find the correct URL |
| rem values left unconverted | Multiply rem × 16 to get px before writing |
| Iframe content not loading | Wait 3–4 seconds after navigation before extracting text |
| Collapsed sidebar sections missing links | Click the section toggle button first, then re-read links |
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Applies a firm's KYC/AML rules grid to parsed onboarding records: assigns risk rating, checks required documents, outputs rule outcomes with citations, and routes for escalation.
Generates daily or weekly digests of activity from connected sources (chat, email, docs, tasks, CRM), highlighting action items, decisions, mentions, and project updates.
npx claudepluginhub lifesg/ccube-agent-plugin-marketplace --plugin ccube-ux-designers