` with `<title>` - Inlining the contents of `_context/tokens.css` into the `<style data-vellum="tokens">` block - Inlining the contents of `_context/tailwind-config.js` into the `<script data-vellum="config">` block - Generating the body content from the user's prompt, using ONLY class patterns from `context.md`. Do NOT invent new component vocabularies. 7. Write to `<repo>/.claude/designs/<project-slug>/drafts/<draft-id>.html`. 8. Append to manifest: ```json { "id": "<draft-id>", "title": "<title>", "parent": null, "prompt": "<prompt>", "createdAt": "<ISO>" } ``` 9. Print: draft ID, file path, and the `open` command they can run next. ### Verb: `iterate <draft-id> --mode <replace|branch> -p "prompt" [-p "prompt2" ...]` Required args: `<draft-id>`, `--mode` (replace or branch), one or more `-p` prompts. #### Mode: `replace` - Single `-p` prompt expected. - Read existing draft HTML. - Read `_context/context.md`. - Apply the prompt as a refinement (e.g., "swap rows 2 and 3", "increase row gap to 1.5rem", "convert this section to a tab group"). - Overwrite the same file at the same path. - Update the manifest entry's `prompt` field by appending the new prompt as a new array element under `iterations` (don't lose history). - Keep the same `<draft-id>`. #### Mode: `branch` - One or more `-p` prompts. Each prompt produces ONE new sibling draft. - For each prompt: - Generate a new draft ID: `<draft-id>-b<n>-<6-char-hash>` where `n` is the branch number. - Copy the existing draft as a starting point. - Apply the prompt as a transformation. - Write to a new file. - Add a manifest entry with `parent: <draft-id>` and the prompt. - Print all new draft IDs and their open commands. ### Verb: `open <draft-id>` 1. Find the draft file by scanning `<repo>/.claude/designs/*/drafts/<draft-id>.html`. 2. Run `open <path>` (macOS) — opens in the default browser. 3. Print the file path. For Linux, use `xdg-open`. For Windows (WSL), use `wslview` or `explorer.exe`. ### Verb: `list [project-slug]` If `<project-slug>` provided: list drafts in that project's manifest as a tree (parent → children). If no slug: list all projects in `<repo>/.claude/designs/` with their draft counts. Format the output as a clear tree: ``` my-modal-redesign (3 drafts) ├── baseline-a8c3d1 │ ├── baseline-a8c3d1-b1-fe92ac (branch: "tighter spacing") │ └── baseline-a8c3d1-b2-77b104 (branch: "two-column layout") └── alt-direction-ee7720 ``` ## Generation rules — READ EVERY ITERATION When generating or iterating draft HTML, you MUST: 1. **Read `_context/context.md` first.** It contains the project's design vocabulary. Use those exact class strings for shadcn primitives. Do not invent new patterns. 2. **Self-contained file.** Every draft is a single `.html` file with NO external dependencies except: - `https://cdn.tailwindcss.com` — Tailwind JIT - Google Fonts CDN for Geist (or whatever the project uses) - Inline `<style>` blocks for tokens and animations - Inline `<script>` block for `tailwind.config = {...}` 3. **Dark mode is class-based.** Put `class="dark"` on `<html>` (or `<body>`) by default — the project uses dark as primary. 4. **Body defaults.** `<body class="dark bg-background text-foreground font-geist">` (or font-sans if no Geist). 5. **Use rem and Tailwind utilities, not px.** No `style="width: 280px"`. Use `max-w-xs`, `w-20`, `h-9`, `grid-cols-12`, `gap-4`, `space-y-6`, etc. 6. **No JavaScript framework.** Plain HTML. Static content. Interactive states (hover, focus, data-state=checked) can be shown by hardcoding the active state's classes if needed for the mock. 7. **Use Lucide icons via CDN** if needed: `<i data-lucide="plus"></i>` with the lucide auto-init script, OR inline SVG copies. Prefer inline SVG for self-containment. 8. **Match the user's project conventions.** If components.json says `style: "default"` and `baseColor: "neutral"`, the visual baseline is shadcn neutral. Don't drift toward zinc or slate. 9. **Always update the manifest** when writing a new draft or modifying an existing one. 10. **Never read from `.claude/designs/_context/` and then write generated content that contradicts it.** If the project's `--primary` is HSL `0 0% 98%` (near-white in dark mode), don't generate a draft assuming `--primary` is blue. ## Common errors - **"context.md not found"** — run `/vellum init` first, or the user is in the wrong directory. - **"manifest.json not found for project"** — run `/vellum create <name>` first. - **HTML draft has broken Tailwind classes** — re-read `context.md`. Do not invent classes. - **User says "the colors are wrong"** — re-run `/vellum init` to re-extract tokens; the project's globals.css may have changed since last init. ## Phase 2 — out of scope for MVP These verbs are NOT implemented in the MVP. If a user asks for them, explain they're future work: - `promote <draft-id>` — convert HTML draft to a real React component file using shadcn imports - `serve` — start a local HTTP server to preview drafts in a gallery - `flow <draft-id> --pages "..."` — multi-page flows (SuperDesign's `execute-flow-pages`) - Storybook export ## Why "vellum"? Vellum is the translucent drafting paper architects use to sketch over a base drawing without committing. This skill drafts over your real codebase — using its tokens, its components, its conventions — so the sketch is always anchored to reality. 22:o78b,11:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"vellum\",\"description\":\"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind config, and shadcn/ui class vocabulary. No paid service, no account, no remote API.\",\"applicationCategory\":\"Design & creative\",\"operatingSystem\":\"Claude\",\"url\":\"https://agentready.co/connectors/vellum\",\"sameAs\":[],\"publisher\":{\"@type\":\"Organization\",\"name\":\"applesnort\",\"url\":\"https://github.com\"}}"}}],["$","div",null,{"className":"wrap","children":[["$","div",null,{"className":"pp-head","children":[["$","$L23",null,{"name":"vellum","url":null,"size":56}],["$","div",null,{"children":[["$","div",null,{"className":"crumbs","children":[["$","$L5",null,{"href":"/","children":"Connectors"}],[" / ",["$","$L5",null,{"href":"/categories/design","children":"Design & creative"}]]]}],["$","h1",null,{"children":["vellum",null]}]]}]]}],["$","div",null,{"className":"pp","children":[["$","div",null,{"className":"ca","children":[["$","p",null,{"className":"tag","children":"Local design-iteration skill — a self-hosted alternative to SuperDesign."}],["$","$L24",null,{"text":"Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind config, and shadcn/ui class vocabulary. No paid service, no account, no remote API."}],["$","$L25",null,{"examples":[],"tools":[],"prefix":"","server":null,"instructions":[],"skills":[{"name":"vellum","label":"vellum","gist":"Local design-iteration skill — a self-hosted alternative to SuperDesign.","source":"https://github.com/applesnort/vellum/blob/50035fa511f074aabba7c9f689d3c28fbe5beb49/skills/vellum/SKILL.md","raw":"$26"}],"skillNote":"1 in the Claude listing"}],null]}],"$L27"]}]]}]] 22:oa2a,1b:[["$","title","0",{"children":"vellum by applesnort: AI connector · Agent Ready"}],["$","meta","1",{"name":"description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","link","2",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","link","3",{"rel":"canonical","href":"https://agentready.co/connectors/vellum"}],["$","meta","4",{"property":"og:title","content":"vellum by applesnort: AI connector"}],["$","meta","5",{"property":"og:description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","meta","6",{"property":"og:url","content":"https://agentready.co/connectors/vellum"}],["$","meta","7",{"property":"og:site_name","content":"Agent Ready"}],["$","meta","8",{"property":"og:image","content":"https://agentready.co/connectors/vellum/opengraph-image?3b61e23efdbb5225"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"AI connector on Agent Ready"}],["$","meta","13",{"property":"og:type","content":"website"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"vellum by applesnort: AI connector"}],["$","meta","16",{"name":"twitter:description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","meta","17",{"name":"twitter:image","content":"https://agentready.co/connectors/vellum/opengraph-image?3b61e23efdbb5225"}],["$","meta","18",{"name":"twitter:image:alt","content":"AI connector on Agent Ready"}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.3iymezf4ycw3e.ico","sizes":"64x64","type":"image/x-icon"}],["$","link","23",{"rel":"icon","href":"/icon.svg?icon.1m07wgr9jqhm5.svg","sizes":"any","type":"image/svg+xml"}],["$","link","24",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.3q8qrgufoflqu.png","sizes":"180x180","type":"image/png"}],["$","$L28","25",{}]] 22:o10,1c:null 22:null 22:o22,:HL["/stores/claude.png","image"] 22:o12bf,27:["$","aside",null,{"className":"side","children":[["$","div",null,{"className":"card","children":[["$","h2",null,{"children":"Stores"}],["$","div",null,{"className":"st","children":[["$","div","claude",{"style":{"display":"contents"},"children":[["$","span",null,{"className":"s","children":[["$","img",null,{"className":"sm","src":"/stores/claude.png","alt":"","width":16,"height":16}],["$","b",null,{"children":"Claude"}],["$","a",null,{"className":"src","href":"https://github.com/applesnort/vellum","target":"_blank","rel":"noopener nofollow","children":"Source ↗"}]]}],["$","span",null,{"className":"rk2","children":[["$","small",null,{"children":"Listed, not ranked"}],null]}]]}]]}]]}],["$","div",null,{"className":"card","children":[["$","h2",null,{"children":"Details"}],["$","dl",null,{"className":"kv","children":[[["$","dt",null,{"children":"Company"}],["$","dd",null,{"children":"applesnort"}]],[["$","dt",null,{"children":"Publisher"}],["$","dd",null,{"children":"Community"}]],["$","dt",null,{"children":"Category"}],["$","dd",null,{"children":["$","$L5",null,{"href":"/categories/design","children":"Design & creative"}]}],[["$","dt",null,{"children":"Audience"}],["$","dd",null,{"children":"For developers"}]],null,["$","dt",null,{"children":"Sign-in"}],["$","dd",null,{"children":"None needed"}],["$","dt",null,{"children":"Interactive UI"}],["$","dd",null,{"children":"No"}],[["$","dt",null,{"children":"Checked"}],["$","dd",null,{"children":"Oct 27, 2026"}]],null]}]]}],["$","div",null,{"className":"card","children":[["$","h2",null,{"children":["More in ","Design & creative"]}],["$","ul",null,{"className":"sim","children":[["$","li","4166",{"children":["$","$L5",null,{"href":"/connectors/canva","prefetch":false,"children":[["$","$L23",null,{"name":"Canva","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/af/afb54276bf45167125048872621a14156c03034484519d81b5160cb73c2d7c20-64.webp","size":24}],["$","b",null,{"children":"Canva"}],["$","small",null,{"children":"#4"}]]}]}],["$","li","14781",{"children":["$","$L5",null,{"href":"/connectors/wpvibe","prefetch":false,"children":[["$","$L23",null,{"name":"WPVibe","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/5a/5a1fa83a8a7be5997a0d833b845c81af48e71c6243dd23e594d6c5cf000c89de-64.webp","size":24}],["$","b",null,{"children":"WPVibe"}],["$","small",null,{"children":"#6"}]]}]}],["$","li","4169",{"children":["$","$L5",null,{"href":"/connectors/figma","prefetch":false,"children":[["$","$L23",null,{"name":"Figma","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/57/579aca5321c29e47864865f91209d2612dbb3d1807c5a803212aa285ce332170-64.webp","size":24}],["$","b",null,{"children":"Figma"}],["$","small",null,{"children":"#7"}]]}]}],["$","li","4177",{"children":["$","$L5",null,{"href":"/connectors/adobe","prefetch":false,"children":[["$","$L23",null,{"name":"Adobe","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/0a/0a06d1ef83eb20ce635d85f8091944fe8db23f6b8d5eae21b802e0a3228ee004-64.webp","size":24}],["$","b",null,{"children":"Adobe"}],["$","small",null,{"children":"#16"}]]}]}],["$","li","4178",{"children":["$","$L5",null,{"href":"/connectors/miro","prefetch":false,"children":[["$","$L23",null,{"name":"Miro","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/3d/3d1a13ac8d942435b60fe32abba5d548492682ff6626999486b5b7dcfd9410b9-64.webp","size":24}],["$","b",null,{"children":"Miro"}],["$","small",null,{"children":"#18"}]]}]}],["$","li","4184",{"children":["$","$L5",null,{"href":"/connectors/gamma","prefetch":false,"children":[["$","$L23",null,{"name":"Gamma","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/fa/fa79ad9cc0f7b17991cd997a0dfc2fa5e1e76e154d4c790c01e74020dcbbc8ad-64.webp","size":24}],["$","b",null,{"children":"Gamma"}],["$","small",null,{"children":"#23"}]]}]}],["$","li","4193",{"children":["$","$L5",null,{"href":"/connectors/lucid","prefetch":false,"children":[["$","$L23",null,{"name":"Lucid","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/49/492db8e67a4d88be899f3493c5205aae3203894a70f23c5a102a85bd7c66c85d-64.webp","size":24}],["$","b",null,{"children":"Lucid"}],["$","small",null,{"children":"#32"}]]}]}],["$","li","4229",{"children":["$","$L5",null,{"href":"/connectors/webflow","prefetch":false,"children":[["$","$L23",null,{"name":"Webflow","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/c1/c1bf219e2fad2888a34e7f4b433557a1c4aa7195a9ecd5bd8506783fe7e45b82-64.webp","size":24}],["$","b",null,{"children":"Webflow"}],["$","small",null,{"children":"#68"}]]}]}]]}]]}]]}] 22:o11,20:false 1f:7026 22:o17,1e:C 1d:C 1:C 15:C b:C 22:C </article></body></html>

22:o1,#22:o642,2:"$Sreact.fragment" 3:"/_next/static/immutable/chunks/12yk9g49l7-7r.js" 4:"/_next/static/immutable/chunks/2jrhxdtf12-uf.js" 5:I[7575,["$3","$4"],""] 6:I[10291,["$3"],"default"] 7:I[2968,["$3"],"default"] 8:I[4098,["$3"],"WebMCP"] 9:I[57507,["$3"],"ExternalLinks"] a:I[93137,["$3"],"Analytics"] 10:"$Sreact.suspense" 16:"ViewportBoundary" 17:I[82520,["$3"],"$16"] 19:"MetadataBoundary" 1a:I[82520,["$3"],"$19"] :HL["/_next/static/immutable/chunks/3g2_9hnyt6p64.css","style"] 1:X b:X d:X 15:X f:[["children",{"s":"__PAGE__","h":49314,"d":{"r":["$","$2","c",{"children":[["$","$10",null,{"fallback":["$","div",null,{"className":"wrap","style":{"minHeight":"60vh"}}],"children":"$L11"}],["$L12","$L13"],"$L14"]}],"p":false,"v":"$15"}}]] e:[["children",{"s":{"n":"slug","t":"d","k":"vellum","s":[]},"h":49250,"d":{"r":["$","$2","c",{"children":[null,["$","$L6",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$d"},"c":"$Qf"}]] c:[["children",{"s":"connectors","h":49250,"d":{"r":["$","$2","c",{"children":[null,["$","$L6",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$d"},"c":"$Qe"}]] 1d:X 1e:X 22:o1232,0:{"q":"","i":false,"S":true,"r":"$1","t":{"t":{"s":"","h":49234,"d":{"r":["$","$2","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3g2_9hnyt6p64.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/12yk9g49l7-7r.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"ec5Qua_variable","children":["$","body",null,{"children":[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://agentready.co/#org\",\"name\":\"Agent Ready\",\"url\":\"https://agentready.co/\",\"logo\":\"https://agentready.co/icon-512.png\"},{\"@type\":\"WebSite\",\"@id\":\"https://agentready.co/#site\",\"name\":\"Agent Ready\",\"url\":\"https://agentready.co/\",\"publisher\":{\"@id\":\"https://agentready.co/#org\"}}]}"}}],["$","header",null,{"className":"site","children":["$","div",null,{"className":"wrap","children":[["$","$L5",null,{"href":"/","className":"brand","children":[["$","svg",null,{"className":"brand-mark","viewBox":"0 0 64 64","aria-hidden":"true","children":[["$","defs",null,{"children":["$","linearGradient",null,{"id":"arg","x1":"0","y1":"1","x2":"1","y2":"0","children":[["$","stop",null,{"offset":"0","stopColor":"#2563EB"}],["$","stop",null,{"offset":"1","stopColor":"#06B6D4"}]]}]}],["$","path",null,{"d":"M9 55 L32 9 L55 55","fill":"none","stroke":"url(#arg)","strokeWidth":"11","strokeLinecap":"round","strokeLinejoin":"round"}],["$","circle",null,{"cx":"32","cy":"45","r":"7","fill":"#FACC15"}]]}],"Agent Ready"]}],["$","nav",null,{"aria-label":"Main","children":[["$","$L5",null,{"href":"/","children":"Connectors"}],["$","$L5",null,{"href":"/categories","className":"nv-x","children":"Categories"}],["$","$L5",null,{"href":"/blog","children":"Blog"}],["$","$L5",null,{"href":"/mcp-plugin-usage","className":"nv-x","children":"Usage"}],["$","$L5",null,{"href":"/methodology","className":"nv-x","children":"Methodology"}],["$","$L5",null,{"href":"/work-with-us","className":"nv-cta","children":"Work with us"}]]}]]}]}],["$","main",null,{"children":["$","$L6",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L7",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","$L8",null,{}],["$","$L9",null,{}],["$","$La",null,{}],["$","footer",null,{"className":"foot","children":["$","div",null,{"className":"wrap","children":[["$","span",null,{"children":"Agent Ready"}],["$","nav",null,{"aria-label":"Footer","children":[["$","$L5",null,{"href":"/blog","children":"Blog"}],["$","$L5",null,{"href":"/mcp-plugin-usage","children":"Usage"}],["$","$L5",null,{"href":"/methodology","children":"Methodology"}],["$","$L5",null,{"href":"/categories","children":"Categories"}],["$","a",null,{"href":"/llms.txt","children":"llms.txt"}],["$","a",null,{"href":"/sitemap.xml","children":"Sitemap"}],["$","$L5",null,{"href":"/work-with-us","children":"Work with us"}]]}]]}]}]]}]}]]}],"p":false,"v":"$b"},"c":"$Qc"},"h":{"r":["$","$2","h",{"children":[null,["$","$L17","-mJRlW_NSI1xwuYykpNf5v",{"children":"$L18"}],["$","$L1a","-mJRlW_NSI1xwuYykpNf5m",{"children":[["$","div",null,{"hidden":true,"children":["$","$10",null,{"name":"Next.Metadata","children":"$L1b"}]}],"$L1c"]}]]}],"p":false,"v":"$1d"}},"s":"$1e","a":"$@1f","w":"$@20"} 22:o1b1,21:I[82520,["$3"],"OutletBoundary"] :HL["/_next/static/immutable/chunks/2lo4itc7piqdu.css","style"] d:C 12:["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/2lo4itc7piqdu.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}] 13:["$","script","script-0",{"src":"/_next/static/immutable/chunks/2jrhxdtf12-uf.js","async":true,"nonce":"$undefined"}] 14:["$","$L21",null,{"children":"$@22"}] 22:o14d,1e:300 18:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","2",{"name":"theme-color","content":"#ffffff","media":"(prefers-color-scheme: light)"}],["$","meta","3",{"name":"theme-color","content":"#0d0d0f","media":"(prefers-color-scheme: dark)"}]] 22:o25,1d:0 15:0 15:T4,slug1d:T4,slug1e:300 22:o88,23:I[37521,["$3","$4"],"Logo"] 24:I[53913,["$3","$4"],"About"] 25:I[53913,["$3","$4"],"Explore"] 28:I[60329,["$3"],"IconMark"] 26:T2f3d,22:o2f3d,--- name: vellum description: > Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using YOUR codebase's design tokens, Tailwind config, and shadcn/ui class vocabulary. No paid service, no account, no remote API. Files live in `.claude/designs/` in the repo. Verbs: init, create, draft, iterate (replace|branch), open, list. Invoke with `/vellum ` or call directly when the user asks to mock up, sketch, prototype, or iterate on UI. --- # Vellum Vellum mirrors the SuperDesign workflow but generates locally. It produces self-contained HTML files that load Tailwind via CDN, inject your project's CSS variable tokens, and use shadcn/ui class vocabulary extracted from your real components — so generated mocks visually match your real app at ~95% fidelity. ## Storage layout ``` /.claude/designs/ _context/ context.md # design tokens + shadcn class vocabulary (written by init) tokens.css # :root and .dark CSS variable blocks (written by init) tailwind-config.js # extracted Tailwind theme.extend block (written by init) / manifest.json # { id, title, drafts: [{ id, title, parent, prompt, createdAt }] } drafts/ .html # one self-contained file per draft ``` Skill assets: - `~/.claude/skills/vellum/SKILL.md` — this file - `~/.claude/skills/vellum/HTML_TEMPLATE.html` — boilerplate scaffold for new drafts - `~/.claude/skills/vellum/INIT.md` — detailed init procedure ## Verb dispatch When the user types `/vellum ...`, run the matching section below. If no verb is given, list available verbs and short usage. ### Verb: `init` **Run once per repo. Idempotent — re-run if tokens or shadcn components change.** 1. Confirm the working directory is a frontend repo: check for `tailwind.config.ts` OR `tailwind.config.js`, AND `components.json` (shadcn registry). If neither exists, abort with a message asking the user to run vellum from a frontend project root. 2. Read these files: - `app/globals.css` (or `src/globals.css` / `styles/globals.css` — find via search) - `tailwind.config.ts` (or `.js`) - `components.json` - A sampling of `app/components/ui/*.tsx` — read these specific files if present (in priority order; skip any that don't exist): - `button.tsx` - `input.tsx` - `switch.tsx` - `tabs.tsx` - `card.tsx` - `badge.tsx` or `badge.jsx` - `dialog.tsx` - `select.tsx` - `textarea.tsx` - `label.tsx` 3. Extract from `globals.css`: - The `:root { ... }` block (light tokens) - The `.dark { ... }` block (dark tokens) - Any custom `@keyframes` and utility classes that extend Tailwind (animations like `pulse-blue`, `bg-dotted`, etc.) 4. Extract from `tailwind.config.ts`: - `theme.extend.colors` mapping - `theme.extend.fontFamily` - `theme.extend.borderRadius` - Any other extend keys - The `darkMode` setting 5. Extract from each shadcn component you read: - The default variant's full className string (or the cva config if it uses cva) - Each variant's className overrides - Note any data-state styles (e.g. Switch's `data-[state=checked]:bg-primary`) 6. Write `/.claude/designs/_context/tokens.css`: ```css /* Auto-extracted from app/globals.css. Re-run /vellum init to refresh. */ @layer base { :root { /* ...all light vars... */ } .dark { /* ...all dark vars... */ } } /* Plus any custom @keyframes / utility classes */ ``` 7. Write `/.claude/designs/_context/tailwind-config.js`: ```js // Auto-extracted Tailwind theme. Used inline by HTML drafts via cdn.tailwindcss.com. tailwind.config = { darkMode: 'class', theme: { extend: { /* ...colors, fontFamily, borderRadius... */ } } } ``` 8. Write `/.claude/designs/_context/context.md`: - Header: project name (from package.json), shadcn baseColor (from components.json), darkMode setting - Section: **Design tokens** — list every CSS variable with its dark and light value, organized by purpose (background, foreground, primary, etc.) - Section: **Tailwind theme** — colors mapping, font families, border radius - Section: **Component vocabulary** — for each shadcn component read, write a 2-4 line entry with its canonical className. Example: ``` ### Button Base: inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors disabled:opacity-50 Default variant: bg-primary text-primary-foreground hover:bg-primary/90 Outline variant: border border-input bg-background hover:bg-accent Ghost variant: hover:bg-accent hover:text-accent-foreground Sizes: h-10 px-4 py-2 (default), h-9 px-3 (sm), h-11 px-8 (lg), h-10 w-10 (icon) ``` - Section: **Conventions** — note `cn()` from `@/lib/utils`, dark mode is class-based on `` or ``, font is Geist by default (or whatever the project uses), default body classes `bg-background text-foreground`. 9. Print a summary to the user: number of components read, number of CSS variables extracted, path to context.md. If `INIT.md` exists in the skill directory, follow its more detailed procedure instead. ### Verb: `create ` Args: project name (free-form string). 1. Slugify name → `` (lowercase, kebab-case, alphanumeric + dashes only). 2. Generate a short project ID: timestamp-based or `-`. 3. Create `/.claude/designs//drafts/`. 4. Write `/.claude/designs//manifest.json`: ```json { "id": "", "title": "", "createdAt": "", "drafts": [] } ``` 5. If `/.claude/designs/_context/context.md` does NOT exist, automatically run `init` first before creating the project. 6. Print the project slug and full path. ### Verb: `draft --title "..." -p "prompt"` Required args: ``, `--title`, `-p` (prompt — describes what to design). Optional args: - `--context-file ` — additional file to read for visual reference (e.g., a screenshot of an existing component; can repeat). 1. Verify project exists: `/.claude/designs//manifest.json`. 2. Generate draft ID: `-<6-char-hash>` from the title. 3. Read `/.claude/designs/_context/context.md` and `tokens.css`. 4. Read `~/.claude/skills/vellum/HTML_TEMPLATE.html`. 5. Read any `--context-file` paths. 6. Generate the draft HTML by: - Starting from `HTML_TEMPLATE.html` - Filling the `` with `<title>` - Inlining the contents of `_context/tokens.css` into the `<style data-vellum="tokens">` block - Inlining the contents of `_context/tailwind-config.js` into the `<script data-vellum="config">` block - Generating the body content from the user's prompt, using ONLY class patterns from `context.md`. Do NOT invent new component vocabularies. 7. Write to `<repo>/.claude/designs/<project-slug>/drafts/<draft-id>.html`. 8. Append to manifest: ```json { "id": "<draft-id>", "title": "<title>", "parent": null, "prompt": "<prompt>", "createdAt": "<ISO>" } ``` 9. Print: draft ID, file path, and the `open` command they can run next. ### Verb: `iterate <draft-id> --mode <replace|branch> -p "prompt" [-p "prompt2" ...]` Required args: `<draft-id>`, `--mode` (replace or branch), one or more `-p` prompts. #### Mode: `replace` - Single `-p` prompt expected. - Read existing draft HTML. - Read `_context/context.md`. - Apply the prompt as a refinement (e.g., "swap rows 2 and 3", "increase row gap to 1.5rem", "convert this section to a tab group"). - Overwrite the same file at the same path. - Update the manifest entry's `prompt` field by appending the new prompt as a new array element under `iterations` (don't lose history). - Keep the same `<draft-id>`. #### Mode: `branch` - One or more `-p` prompts. Each prompt produces ONE new sibling draft. - For each prompt: - Generate a new draft ID: `<draft-id>-b<n>-<6-char-hash>` where `n` is the branch number. - Copy the existing draft as a starting point. - Apply the prompt as a transformation. - Write to a new file. - Add a manifest entry with `parent: <draft-id>` and the prompt. - Print all new draft IDs and their open commands. ### Verb: `open <draft-id>` 1. Find the draft file by scanning `<repo>/.claude/designs/*/drafts/<draft-id>.html`. 2. Run `open <path>` (macOS) — opens in the default browser. 3. Print the file path. For Linux, use `xdg-open`. For Windows (WSL), use `wslview` or `explorer.exe`. ### Verb: `list [project-slug]` If `<project-slug>` provided: list drafts in that project's manifest as a tree (parent → children). If no slug: list all projects in `<repo>/.claude/designs/` with their draft counts. Format the output as a clear tree: ``` my-modal-redesign (3 drafts) ├── baseline-a8c3d1 │ ├── baseline-a8c3d1-b1-fe92ac (branch: "tighter spacing") │ └── baseline-a8c3d1-b2-77b104 (branch: "two-column layout") └── alt-direction-ee7720 ``` ## Generation rules — READ EVERY ITERATION When generating or iterating draft HTML, you MUST: 1. **Read `_context/context.md` first.** It contains the project's design vocabulary. Use those exact class strings for shadcn primitives. Do not invent new patterns. 2. **Self-contained file.** Every draft is a single `.html` file with NO external dependencies except: - `https://cdn.tailwindcss.com` — Tailwind JIT - Google Fonts CDN for Geist (or whatever the project uses) - Inline `<style>` blocks for tokens and animations - Inline `<script>` block for `tailwind.config = {...}` 3. **Dark mode is class-based.** Put `class="dark"` on `<html>` (or `<body>`) by default — the project uses dark as primary. 4. **Body defaults.** `<body class="dark bg-background text-foreground font-geist">` (or font-sans if no Geist). 5. **Use rem and Tailwind utilities, not px.** No `style="width: 280px"`. Use `max-w-xs`, `w-20`, `h-9`, `grid-cols-12`, `gap-4`, `space-y-6`, etc. 6. **No JavaScript framework.** Plain HTML. Static content. Interactive states (hover, focus, data-state=checked) can be shown by hardcoding the active state's classes if needed for the mock. 7. **Use Lucide icons via CDN** if needed: `<i data-lucide="plus"></i>` with the lucide auto-init script, OR inline SVG copies. Prefer inline SVG for self-containment. 8. **Match the user's project conventions.** If components.json says `style: "default"` and `baseColor: "neutral"`, the visual baseline is shadcn neutral. Don't drift toward zinc or slate. 9. **Always update the manifest** when writing a new draft or modifying an existing one. 10. **Never read from `.claude/designs/_context/` and then write generated content that contradicts it.** If the project's `--primary` is HSL `0 0% 98%` (near-white in dark mode), don't generate a draft assuming `--primary` is blue. ## Common errors - **"context.md not found"** — run `/vellum init` first, or the user is in the wrong directory. - **"manifest.json not found for project"** — run `/vellum create <name>` first. - **HTML draft has broken Tailwind classes** — re-read `context.md`. Do not invent classes. - **User says "the colors are wrong"** — re-run `/vellum init` to re-extract tokens; the project's globals.css may have changed since last init. ## Phase 2 — out of scope for MVP These verbs are NOT implemented in the MVP. If a user asks for them, explain they're future work: - `promote <draft-id>` — convert HTML draft to a real React component file using shadcn imports - `serve` — start a local HTTP server to preview drafts in a gallery - `flow <draft-id> --pages "..."` — multi-page flows (SuperDesign's `execute-flow-pages`) - Storybook export ## Why "vellum"? Vellum is the translucent drafting paper architects use to sketch over a base drawing without committing. This skill drafts over your real codebase — using its tokens, its components, its conventions — so the sketch is always anchored to reality. 22:o78b,11:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareApplication\",\"name\":\"vellum\",\"description\":\"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind config, and shadcn/ui class vocabulary. No paid service, no account, no remote API.\",\"applicationCategory\":\"Design & creative\",\"operatingSystem\":\"Claude\",\"url\":\"https://agentready.co/connectors/vellum\",\"sameAs\":[],\"publisher\":{\"@type\":\"Organization\",\"name\":\"applesnort\",\"url\":\"https://github.com\"}}"}}],["$","div",null,{"className":"wrap","children":[["$","div",null,{"className":"pp-head","children":[["$","$L23",null,{"name":"vellum","url":null,"size":56}],["$","div",null,{"children":[["$","div",null,{"className":"crumbs","children":[["$","$L5",null,{"href":"/","children":"Connectors"}],[" / ",["$","$L5",null,{"href":"/categories/design","children":"Design & creative"}]]]}],["$","h1",null,{"children":["vellum",null]}]]}]]}],["$","div",null,{"className":"pp","children":[["$","div",null,{"className":"ca","children":[["$","p",null,{"className":"tag","children":"Local design-iteration skill — a self-hosted alternative to SuperDesign."}],["$","$L24",null,{"text":"Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind config, and shadcn/ui class vocabulary. No paid service, no account, no remote API."}],["$","$L25",null,{"examples":[],"tools":[],"prefix":"","server":null,"instructions":[],"skills":[{"name":"vellum","label":"vellum","gist":"Local design-iteration skill — a self-hosted alternative to SuperDesign.","source":"https://github.com/applesnort/vellum/blob/50035fa511f074aabba7c9f689d3c28fbe5beb49/skills/vellum/SKILL.md","raw":"$26"}],"skillNote":"1 in the Claude listing"}],null]}],"$L27"]}]]}]] 22:oa2a,1b:[["$","title","0",{"children":"vellum by applesnort: AI connector · Agent Ready"}],["$","meta","1",{"name":"description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","link","2",{"rel":"manifest","href":"/manifest.webmanifest","crossOrigin":"$undefined"}],["$","link","3",{"rel":"canonical","href":"https://agentready.co/connectors/vellum"}],["$","meta","4",{"property":"og:title","content":"vellum by applesnort: AI connector"}],["$","meta","5",{"property":"og:description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","meta","6",{"property":"og:url","content":"https://agentready.co/connectors/vellum"}],["$","meta","7",{"property":"og:site_name","content":"Agent Ready"}],["$","meta","8",{"property":"og:image","content":"https://agentready.co/connectors/vellum/opengraph-image?3b61e23efdbb5225"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"AI connector on Agent Ready"}],["$","meta","13",{"property":"og:type","content":"website"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"vellum by applesnort: AI connector"}],["$","meta","16",{"name":"twitter:description","content":"Local design-iteration skill — a self-hosted alternative to SuperDesign. Generates static HTML/CSS mockups using your codebase's design tokens, Tailwind…"}],["$","meta","17",{"name":"twitter:image","content":"https://agentready.co/connectors/vellum/opengraph-image?3b61e23efdbb5225"}],["$","meta","18",{"name":"twitter:image:alt","content":"AI connector on Agent Ready"}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.3iymezf4ycw3e.ico","sizes":"64x64","type":"image/x-icon"}],["$","link","23",{"rel":"icon","href":"/icon.svg?icon.1m07wgr9jqhm5.svg","sizes":"any","type":"image/svg+xml"}],["$","link","24",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.3q8qrgufoflqu.png","sizes":"180x180","type":"image/png"}],["$","$L28","25",{}]] 22:o10,1c:null 22:null 22:o22,:HL["/stores/claude.png","image"] 22:o12bf,27:["$","aside",null,{"className":"side","children":[["$","div",null,{"className":"card","children":[["$","h2",null,{"children":"Stores"}],["$","div",null,{"className":"st","children":[["$","div","claude",{"style":{"display":"contents"},"children":[["$","span",null,{"className":"s","children":[["$","img",null,{"className":"sm","src":"/stores/claude.png","alt":"","width":16,"height":16}],["$","b",null,{"children":"Claude"}],["$","a",null,{"className":"src","href":"https://github.com/applesnort/vellum","target":"_blank","rel":"noopener nofollow","children":"Source ↗"}]]}],["$","span",null,{"className":"rk2","children":[["$","small",null,{"children":"Listed, not ranked"}],null]}]]}]]}]]}],["$","div",null,{"className":"card","children":[["$","h2",null,{"children":"Details"}],["$","dl",null,{"className":"kv","children":[[["$","dt",null,{"children":"Company"}],["$","dd",null,{"children":"applesnort"}]],[["$","dt",null,{"children":"Publisher"}],["$","dd",null,{"children":"Community"}]],["$","dt",null,{"children":"Category"}],["$","dd",null,{"children":["$","$L5",null,{"href":"/categories/design","children":"Design & creative"}]}],[["$","dt",null,{"children":"Audience"}],["$","dd",null,{"children":"For developers"}]],null,["$","dt",null,{"children":"Sign-in"}],["$","dd",null,{"children":"None needed"}],["$","dt",null,{"children":"Interactive UI"}],["$","dd",null,{"children":"No"}],[["$","dt",null,{"children":"Checked"}],["$","dd",null,{"children":"Oct 27, 2026"}]],null]}]]}],["$","div",null,{"className":"card","children":[["$","h2",null,{"children":["More in ","Design & creative"]}],["$","ul",null,{"className":"sim","children":[["$","li","4166",{"children":["$","$L5",null,{"href":"/connectors/canva","prefetch":false,"children":[["$","$L23",null,{"name":"Canva","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/af/afb54276bf45167125048872621a14156c03034484519d81b5160cb73c2d7c20-64.webp","size":24}],["$","b",null,{"children":"Canva"}],["$","small",null,{"children":"#4"}]]}]}],["$","li","14781",{"children":["$","$L5",null,{"href":"/connectors/wpvibe","prefetch":false,"children":[["$","$L23",null,{"name":"WPVibe","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/5a/5a1fa83a8a7be5997a0d833b845c81af48e71c6243dd23e594d6c5cf000c89de-64.webp","size":24}],["$","b",null,{"children":"WPVibe"}],["$","small",null,{"children":"#6"}]]}]}],["$","li","4169",{"children":["$","$L5",null,{"href":"/connectors/figma","prefetch":false,"children":[["$","$L23",null,{"name":"Figma","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/57/579aca5321c29e47864865f91209d2612dbb3d1807c5a803212aa285ce332170-64.webp","size":24}],["$","b",null,{"children":"Figma"}],["$","small",null,{"children":"#7"}]]}]}],["$","li","4177",{"children":["$","$L5",null,{"href":"/connectors/adobe","prefetch":false,"children":[["$","$L23",null,{"name":"Adobe","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/0a/0a06d1ef83eb20ce635d85f8091944fe8db23f6b8d5eae21b802e0a3228ee004-64.webp","size":24}],["$","b",null,{"children":"Adobe"}],["$","small",null,{"children":"#16"}]]}]}],["$","li","4178",{"children":["$","$L5",null,{"href":"/connectors/miro","prefetch":false,"children":[["$","$L23",null,{"name":"Miro","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/3d/3d1a13ac8d942435b60fe32abba5d548492682ff6626999486b5b7dcfd9410b9-64.webp","size":24}],["$","b",null,{"children":"Miro"}],["$","small",null,{"children":"#18"}]]}]}],["$","li","4184",{"children":["$","$L5",null,{"href":"/connectors/gamma","prefetch":false,"children":[["$","$L23",null,{"name":"Gamma","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/fa/fa79ad9cc0f7b17991cd997a0dfc2fa5e1e76e154d4c790c01e74020dcbbc8ad-64.webp","size":24}],["$","b",null,{"children":"Gamma"}],["$","small",null,{"children":"#23"}]]}]}],["$","li","4193",{"children":["$","$L5",null,{"href":"/connectors/lucid","prefetch":false,"children":[["$","$L23",null,{"name":"Lucid","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/49/492db8e67a4d88be899f3493c5205aae3203894a70f23c5a102a85bd7c66c85d-64.webp","size":24}],["$","b",null,{"children":"Lucid"}],["$","small",null,{"children":"#32"}]]}]}],["$","li","4229",{"children":["$","$L5",null,{"href":"/connectors/webflow","prefetch":false,"children":[["$","$L23",null,{"name":"Webflow","url":"https://bodgzvrssuydrdmsrqsh.supabase.co/storage/v1/object/public/listing-media/v/c1/c1bf219e2fad2888a34e7f4b433557a1c4aa7195a9ecd5bd8506783fe7e45b82-64.webp","size":24}],["$","b",null,{"children":"Webflow"}],["$","small",null,{"children":"#68"}]]}]}]]}]]}]]}] 22:o11,20:false 1f:7026 22:o17,1e:C 1d:C 1:C 15:C b:C 22:C </article></body></html>

vellum

Skills

vellum

Skills