{"slug": "claude-md-template-design-in-paper-build-with-claude-code-and-heroui", "title": "CLAUDE.md template: design in Paper, build with Claude Code and HeroUI", "summary": "A developer published a CLAUDE.md template for building apps with Claude Code and HeroUI, using Paper for design. The template enforces one design file per feature with unique board IDs, requires Claude Code to cite boards by name and file before editing, and mandates reading exact values via Paper's MCP rather than measuring screenshots.", "body_md": "is <one line: what it is and what it's built with, e.g. \"a Next.js app in a pnpm monorepo\">.\n\nDesigns live in Paper, and the code follows them. Match spacing, sizes and type exactly.\n\n**One file per feature**, named \" \", each holding that feature's boards on one page. Before you design or build, open the file for the feature you're on:\n\n- \" Home\" ([https://app.paper.design/file/](https://app.paper.design/file/) ): 01 to 01f (the page, loading, empty, the ⋯ menu), D01 in dark.\n- \" Settings\" ([https://app.paper.design/file/](https://app.paper.design/file/) ): 10 to 10h (General, Account, Billing, Notifications).\n- \" Shell\" ([https://app.paper.design/file/](https://app.paper.design/file/) ): 20 to 20d (sidebar, command menu, errors, offline).\n- …\n\nBoard rules:\n\n- **Every board has an ID that's unique across all files** , like \"12c Settings / Billing: Card declined\". Code and messages cite boards by it.\n- **A flow takes a number, its states take letters** : 12, 12b, 12c… A flow that runs past z takes the next unused number. Next unused: . Update this line when you take one.\n- **A flow ends with a \"How it behaves\" board** : the rules a screenshot can't show (what Esc does, what happens with 0 or 1,000 items, what can be undone).\n- **A dark copy's ID starts with D** (\"D12 Settings / Billing (Dark)\").\n- **A new screen goes in its feature's file, and a new feature gets a file of its own** , added to the list above. When a file nears Paper's size limit, split it by part (\" Mail / Thread\", \" Mail / Drafts\") and update the list.\n\nI follow along by opening the file in Paper and watching, so:\n\n- **Name the file with the board.** Write the board's full name and its file, linked: \"12c Settings / Billing: Card declined\" in [Settings](https://app.paper.design/file/%3Cid%3E) , never \"board 12c\" alone.\n- **Say where before you change it.** Before your first write to a file, name the file and the boards you're about to add or change.\n- **End with what changed where.** The final message lists each file you changed, linked, with its boards.\n- **Paper matches the code.** A change that alters a screen updates its board in the same task, without asking. A board that's out of date is a bug.\n- **Draw with the real parts.** Boards use the same tokens, type scale and components as the code, so building one is assembling, not interpreting.\n\n- **Read values, don't eyeball them.** Use Paper's MCP (`get_jsx` ,`get_computed_styles` ) for exact sizes, colors and spacing. Never measure a screenshot.\n- **Text in rem, everything else in px.** Divide a Paper text size or line height by the root font size (<16>) to get rem. Spacing, radius and sizes stay px and match Paper 1:1.\n- **Compare before calling it done.** Open the built screen in the browser, screenshot it beside the board, and fix what differs.\n- **Never reuse real data from screenshots or references.** Names, companies and numbers come from the made-up data in`<path/to/fixtures>` .\n\n- **Components first:** HeroUI (`@heroui/react` ) and HeroUI Pro (`@heroui-pro/react` ) . Write a custom component only when none fits, and make it look like one.\n- **One icon set:** <Gravity UI (`@gravity-ui/icons` )>.\n- **Colors come from tokens** in`<path/to/theme.css>` , light and dark. No raw hex in components except brand marks.\n- **Rows, tabs and segments change instantly** on hover and focus, with no transitions. A fading highlight makes an app feel slow.\n- **Keyboard focus is a thin 1px border** , not a 2px accent ring. Text fields keep the ring, which shows where typing goes.\n- **Every empty list says why** : an icon, what's empty in a few words, what will show up there, and a button when only the user can fix it. Never a bare \"No items\".\n- **Loading is a skeleton** shaped like the rows it turns into, not \"Loading…\" text. A spinner is only for an action the user started.\n- **A button that waits shows it** : a spinner inside, at the same width. Don't also disable it; disable the buttons around it.\n- **Lists that can grow are virtualized** from the start.\n- **Copy:** short, plain words. No em dashes in UI copy.\n\nAnything a screen does can be done without the pointer. A new screen ships with its keys, not after them.\n\n- **Plan the keys with the screen.** Before building, list what it does and give each frequent action a key. Check`<path/to/shortcuts.ts>` first, so a key means the same thing everywhere (↵ open, Esc close or go back, ⌘K command menu, J/K move, Z undo).\n- **Single-letter keys never fire while typing** or inside a menu or dialog.\n- **Map every key** in`<path/to/shortcuts.ts>` , which draws the shortcuts sheet and Settings > Shortcuts.\n- **Check it by keyboard alone** before finishing: move, open, act, undo, close.\n\n- No query or fetch per item: one query with a join, or the provider's batch endpoint.\n- Run independent calls together (`Promise.all` ), never one after another.\n- Never hold a lock or transaction across a network call.\n- Fetch only as far as the screen needs.\n\n- Before writing a migration or backfill script: say what data changes and why, then wait for a yes.\n\nEach feature's details live in a CLAUDE.md in its folder, which Claude Code reads once it opens a file there. Keep this file to rules that apply across the app.\n\n- `<src/features/billing/CLAUDE.md>` : Billing (plans, invoices, the card form).\n- …\n\n`<pnpm dev>`, `<pnpm typecheck>`, `<pnpm lint>`, `<pnpm test>`.", "url": "https://wpnews.pro/news/claude-md-template-design-in-paper-build-with-claude-code-and-heroui", "canonical_source": "https://gist.github.com/jrgarciadev/b6d4befd14b27eaa514a48160ddd2ca6", "published_at": "2026-10-29 15:35:34+00:00", "updated_at": "2026-10-30 20:48:33.411074+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "developer-tools", "ai-products"], "entities": ["Claude Code", "Paper", "HeroUI", "Anthropic", "Gravity UI"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/claude-md-template-design-in-paper-build-with-claude-code-and-heroui", "markdown": "https://wpnews.pro/news/claude-md-template-design-in-paper-build-with-claude-code-and-heroui.md", "text": "https://wpnews.pro/news/claude-md-template-design-in-paper-build-with-claude-code-and-heroui.txt", "jsonld": "https://wpnews.pro/news/claude-md-template-design-in-paper-build-with-claude-code-and-heroui.jsonld"}}