Refero style prompt: design plan before code
Pages that could fit any startup: a Refero style as reference, a design plan you approve, then DESIGN.md and screenshot checks.
141 saves on X, as of Posted
Prompt
Use <REFERO_STYLE_URL> as the design reference for this project. Do not copy its brand, wording, or full-page layout.
Before writing code, give me a design plan:
→ the page’s audience and single goal
→ 4 to 6 color tokens
→ display and body typefaces
→ the layout concept and an ASCII wireframe
→ one signature element
→ what you kept from the reference, what you changed, and why
Redo it if the same plan would work unchanged for another startup.
After I approve it, save the final plan to DESIGN.md, then implement it. When finished, capture desktop and mobile screenshots. Check color, typography, spacing, and layout against DESIGN.md.Next Send it to Claude Code or Codex in your project.
2,000+ complete design systems for Claude Code and Codex, all in one site: Refero Styles. Open one and you get:
- DESIGN.md
- Tailwind v4
- CSS variables
- design tokens
- type, color, spacing, components, and dos and don’ts
Pick a Refero style close to your product. Anthropic’s frontend-design skill adds a useful rule before code: choose an aesthetic direction, then reject any plan that could work unchanged for another startup.
Share this tip
