# De-vibe Starter **A weekend design pass for vibe-coded products, run by the agent that built them.** Three passes — the bones, the surface, the words — each a checklist with copy-paste prompts. Everything here is designed to run on a mid-tier model: the prompts carry the context, so you do not need the frontier tier. A mid-tier model with written rules beats a frontier model improvising. **What you need** - **An agent that can see and edit your whole project.** Claude Code (Sonnet is enough), Codex CLI, or Cursor. Built on Lovable, v0, Bolt, or Replit? Use its own agent — the rules file from Pass 2 goes into the project's instructions/knowledge box. - **A vision-capable chat model** for the screenshot critiques. The cheapest tier with vision is fine. - A weekend, and screenshots of your five most important screens. **For consistency as you grow** (not needed for the weekend — each earns its seat when a second surface appears): **Figma** as the visual source of truth, even one page of components; **GitHub** as the memory, so the rules file lives beside the code and every version keeps its reason; **Notion** or any shared page for decisions the next session reads; one motion engine (**GSAP** or **Motion**) reading one duration token; **Remotion** when brand video should come from the same system as the product. **The one principle:** never ask for "prettier." Every "improve the design" is a fresh session improvising — you are re-rolling dice. Instead: audit, decide once, write it down, apply, check. Each prompt below does exactly one of those. --- ## Pass 1 — The bones (structure) **1.1 Inventory.** > List every page in this project. For each page, list its sections in > order, and for each section state in one sentence what it is trying to > do for a first-time visitor. Do not fix anything yet. **1.2 The one-job test.** For each page, write one sentence: *this page exists to ______*. Then: > Here is each page's one job: [paste]. For every section, tell me > whether it serves that job, duplicates another section, or serves no > job. Recommend cut, merge, or keep — with one reason each. Do not > redesign anything yet. Expect the page to get *shorter*. Vibe-coded sites over-generate — nine sections saying three things. **1.3 Borrow boring bones.** Do not invent structure. A landing page that works: hero (what it is + who it's for + one proof) → how it works → evidence (numbers, testimonials, logos — only real ones) → pricing → one CTA, repeated. An app screen that works: one primary object, one primary action, navigation that never moves. Spend your novelty budget on content, never on structure. **1.4 Order is an argument.** Sections run in the order a skeptic asks questions: what is this? → is it for me? → does it work? → what does it cost? → fine, how do I start? > Reorder the sections of [page] to answer, in order: what is this, is it > for me, does it work, what does it cost, how do I start. Delete any > section that answers none of these. **Done when:** every section answers a question you can name, and the page count went down or stayed flat — never up. --- ## Pass 2 — The surface (visual & motion) **2.1 The audit.** Make the agent count what improvisation produced: > Scan the entire codebase and count every distinct value in use for: > text colors, background colors, font sizes, font weights, spacing > values (margin/padding/gap), border radii, shadows, and button styles. > Output a table: category · distinct values · the values themselves · > where each appears. Count, do not fix. The number is the motivator. Real vibe-coded products land at 20+ grays and four button styles nobody chose. **2.2 Decide once.** One session — the only step where a stronger model earns its price, because this is judgment. After it, everything is mechanical and cheap. Collapse each list to a closed set: > Here is the audit: [paste]. Propose closed sets: ONE accent color, one > neutral ramp of at most 6 steps, at most 4 spacing values on a single > scale, at most 2 border radii, at most 3 text sizes plus one for > labels, 1–2 font families, at most 2 shadows. For each set, map every > current value to its replacement. Where you must choose, choose the > quieter option. Non-designer shortcuts that make this safe: steal *proportions* from a product you admire, never its look. When unsure, pick the quieter option. One accent color means one — if two things are accent-colored, neither reads as the action. **2.3 Write the rules file.** One page, in the repo root (or the platform's instructions box). Template: ```md # design-rules.md — read this before any UI change ## Sets (closed — never add values, only use these) Accent: ____ (one). Neutrals: ____ (≤6 steps). Spacing: __ / __ / __ / __ only. Radii: __ and __ only. Text sizes: __ / __ / __ (+ __ for labels). Fonts: ____ (UI), ____ (optional second). Shadows: __ and __ only. ## Judgment - One primary action per screen; only it wears the accent. - When two options both work, ship the quieter one. - Whitespace is a decision: if 12 feels tight and 16 feels loose, ship 16. - Align to one grid; centered text is for headings only. ## Never - No raw color values outside this file's sets. - No new fonts, radii, shadows, or spacing values. - No gradient blobs, typewriter text, tilt-on-hover, or fade-up-on-scroll-everything. - Motion: one duration (≈200ms), one easing, entrances only — motion reports something arriving, leaving, or working. Nothing loops. - Copy: see Pass 3's banned list. ``` **2.4 The sweeps.** One family per session, never one big restyle — small diffs you can actually check: > Read design-rules.md. Sweep the codebase for COLOR only: replace every > value with its mapped replacement from the sets. Change nothing else. > Then list every file you touched and any value you could not map. Repeat for spacing, then type, then components (one button recipe, one card recipe). Then re-run the 2.1 audit — watching 27 grays become 6 is the payoff. **2.5 The one-thing pass (hierarchy).** Per screen: > For [screen], the one thing a user should do is [action]. Make only > that element visually loudest (accent, size, position). Demote > everything else by one step: secondary actions lose the accent, > decorative elements lose contrast. Nothing else changes. Then the screenshot critique — paste a screenshot into your vision chat model: > List the three visually loudest elements in this screenshot, in order. > Then tell me where the eye lands first, second, third. If the answer isn't your primary action, fix and re-run. The human version: squint at the screen — whatever survives the blur is your hierarchy, whether you chose it or not. **2.6 The states you forgot.** > List every state each screen can be in: empty (no data yet), loading, > error, success, plus hover/focus/disabled for interactive elements. > Mark which exist and which render as broken layouts or placeholder > text. Then build the missing ones inside design-rules.md. **Done when:** the re-run audit shows only the sets; every screen names its one action and the critique model agrees; no state renders broken. --- ## Pass 3 — De-AI the words **3.1 The tells.** Banned outright — add to the rules file: - Unleash · Seamless · Elevate · Revolutionize · Empower · Supercharge · Effortless · Game-changing · "In today's fast-paced world" - Emoji bullets. Exclamation marks. Every heading a gerund ("Empowering your workflow"). - Benefits any product could claim ("Boost productivity"). **3.2 The voice line.** One line in the rules file: *We sound ____, ____, and ____. We never sound ____.* (Three adjectives you'd use for a person, one you'd fire them for.) **3.3 The competitor-swap test.** The core rewrite prompt: > Rewrite this page's copy saying only things that are specifically true > of THIS product. Test every sentence: if it could sit unchanged on a > competitor's site, cut it or replace it with something only we can say > — a number with a unit, a concrete object, a real constraint. Follow > the voice line and banned list in design-rules.md. "Unleash seamless productivity" → "Send an invoice from your phone in 30 seconds." The second one cannot be swapped; that is the whole test. **Done when:** no sentence survives the swap test, and the copy contains at least one number with a unit per page. --- ## Keep it from rotting - Every future session starts by reading `design-rules.md`. Non-negotiable. - Every correction you make twice becomes a new rule line the same day. - Re-run the 2.1 audit monthly. Numbers creeping up = a decision leaking out of the file. **Honest limit:** this pass gets you to clean and credible — consistency, hierarchy, states, copy that sounds human. It does not get you to *distinctive*; that last mile is taste, and taste is a person. But credible is what converts, and credible is a weekend. --- *From "De-vibe your product" — https://www.hribhav.co/experiments/de-vibe-your-product*