15 hacks that turn Claude into a design genius.

# style.md: the look of [reference name]
Fill this in from the reference clip. Be specific: use numbers, hex codes and real names.

## Palette
- Background: #
- Main ink: #
- Accent 1: #
- Accent 2: #
- Never use: (colours the clip never shows)

## Type
- Display font:
- Body font:
- Sizes: (title, label)
- Weight and case:

## Shots
- Number of shots:
- Shot length: (shortest to longest, in seconds)
- Hold on the last shot: (seconds)

## Transitions
- Which ones (hard cut, whip, morph, wipe) and how often:

## Camera
- Moves (push in, pull back, pan, parallax) and their speed:

## Texture
- Grain, noise, shadow, blur:

## Text
- How text enters:
- How text leaves:
- Words per shot:

## Never
- Three looks to avoid (for example: centred text on a purple gradient):

# Camera words Claude understands
Say these in your brief. Add a number when you can.

- Push in: the camera moves closer. Try "push in 8% over 3 seconds".
- Pull back: the camera moves away to show more.
- Slow every zoom to 0.7x: all zooms run at 70% of their speed.
- Hard cut on the beat: switch shots on a drum hit, with no fade.
- Whip pan: a fast sideways blur that hides a cut.
- Match cut: the next shot starts with the same shape in the same place.
- Rack focus: the sharp part moves from one thing to another.
- Parallax: layers move at different speeds, so the scene feels deep.
- Hold: stay still on the last frame for 1.5 seconds.
- Ease out: start fast, finish slow. It looks natural.

# Deck outline: [topic]
One idea per slide. Headline: 8 words at most. The line under it: 10 words at most.

| # | Headline | One moving graphic (loops 6 to 10 seconds) | It is like... |
|---|---|---|---|
| 1 | The hook | | |
| 2 | The problem | | |
| 3 | The idea | | |
| 4 | How it works | | |
| 5 | The proof | | |
| 6 | The result | | |
| 7 | The next step | | |
| 8 | The ask | | |

# Five slide rules
1. Use the real logo of every tool you name.
2. Every slide has one idea and one moving graphic. No bullet lists.
3. Headline: 8 words at most. The line under it: 10 words at most.
4. Use real design sources, such as a design system from a real brand, and name them.
5. Make it look finished: real texture, no sparkle icons, no clipped text.

Before you build, show me three different styles. Wait for my pick.

/* Small premium motion. Paste into your stylesheet.
   Only transform and opacity move, so it stays smooth. */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms;
  --t-med: 260ms;
}

/* 1. A lift on hover (give your cards the class "card") */
.card { transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .25); }
}

/* 2. A soft press (give your buttons the class "btn") */
.btn { transition: transform var(--t-fast) var(--ease-out); }
.btn:active { transform: scale(.97); }

/* 3. A stagger when things enter.
   Add class "reveal" and style="--i:0", then --i:1, --i:2 ... */
.reveal { opacity: 0; transform: translateY(12px); animation: rise 300ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* 4. A focus ring that eases in */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; animation: ring var(--t-fast) var(--ease-out); }
@keyframes ring { from { outline-offset: 0; } }

/* 5. Respect "reduce motion". Never remove this block. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

// Count a number up once, when it scrolls into view.
// Use: <span data-count="1280">0</span>
(() => {
  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
  const ease = t => 1 - Math.pow(1 - t, 3);                      // ease-out
  const run = el => {
    const to = +el.dataset.count, ms = 900, start = performance.now();
    if (reduce) { el.textContent = to.toLocaleString(); return; }
    const tick = now => {
      const t = Math.min(1, (now - start) / ms);
      el.textContent = Math.round(to * ease(t)).toLocaleString();
      if (t < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  };
  const io = new IntersectionObserver(entries => entries.forEach(e => {
    if (e.isIntersecting) { run(e.target); io.unobserve(e.target); }
  }), { threshold: .4 });
  document.querySelectorAll('[data-count]').forEach(el => io.observe(el));
})();

---
version: alpha
name: Your Brand Name
description: One sentence. Who it is for and how it should feel.
colors:
  primary: "#111827"      # main ink: headlines and body text. Replace.
  secondary: "#6B7280"    # muted text and borders. Replace.
  tertiary: "#2563EB"     # your ONE accent: buttons and links only. Replace.
  neutral: "#F9FAFB"      # page background. Replace.
  surface: "#FFFFFF"      # cards and inputs. Replace.
  on-tertiary: "#FFFFFF"  # text that sits on the accent. Replace.
typography:
  headline-lg:
    fontFamily: Fraunces  # your headline font. Replace.
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-md:
    fontFamily: Inter     # your body font. Replace.
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px
spacing:
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-tertiary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-tertiary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 32px
  caption:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
---

# Your Brand Name

Fill in every line. Use numbers and hex codes, never "nice" or "clean". If a brand book does not say, write TODO. Never guess.

## Overview

[Two or three sentences. Who is it for? Calm or loud? Dense or spacious? Photo, illustration or type-led? Name one real brand it should feel close to.]

## Colors

- **Primary (#111827):** Main ink. Headlines and body text.
- **Secondary (#6B7280):** Muted text, borders, captions.
- **Tertiary (#2563EB):** The only accent. Buttons and links. Nothing else.
- **Neutral (#F9FAFB):** Page background.
- **Surface (#FFFFFF):** Cards and inputs.

[Add the rule for how often the accent appears, for example: once per screen.]

## Typography

Two fonts only. **Fraunces** (600) for headlines. **Inter** (400 and 600) for everything else. Body text is 16px with lines under 75 characters. Both fonts are free for commercial use. Link: [paste your Google Fonts or Fontshare link].

## Layout

[Grid and page width, for example: 12 columns, 1120px maximum.] The spacing scale is 8, 16, 32 and 64px. Keep sections 64px apart.

## Elevation & Depth

[Shadows or flat? For example: no shadows. Depth comes from a 1px border in the secondary colour.]

## Shapes

Corners are 8px on buttons and 16px on cards. Pills (9999px) only for tags.

## Components

- **Buttons:** accent fill, label-md text, 12px padding. The hover state darkens to the primary colour.
- **Cards:** white surface, 16px corners, 32px padding.
- **Inputs:** [border, height, focus ring, error state.]

## Do's and Don'ts

- Do use the accent once per screen, on the main action.
- Do keep text contrast at 4.5:1 or better.
- Don't add a second accent colour.
- Don't use a third font.
- Don't [add one more rule your brand book shows. Copy it from the misuse page.]

## Iconography

One icon set: [Lucide]. 24px, 2px stroke, text colour. No decorative icons. Company logos come from the real mark, never drawn by hand.

## Voice

[Three words for the tone. Two real example lines from the brand. Five words to never use.]

# Brand inspiration list: real brand books, logos and DESIGN.md files
Every link was opened on 5 Oct 2026. Brand books belong to their owners. Study the structure. Do not copy a brand you do not own.

## Brand book checklist
Open a brand book. Tick each item you can copy into your own DESIGN.md. If the book skips it, write TODO.
- [ ] Logo: versions for light and dark, icon-only version, clear space, minimum size.
- [ ] Colour: hex codes, the job of each colour, and which one is the only accent.
- [ ] Type: font names, weights, sizes, line height, upper or lower case. Add a free substitute if the font is paid.
- [ ] Imagery: photo style, crops, illustration rules, icon style.
- [ ] Layout: grid, spacing scale, corner radius, shadow or border.
- [ ] Voice: three tone words and two real example lines.
- [ ] Misuse page: every "do not" the book shows. These become your Don'ts.
- [ ] Motion: speed and easing, if the book has a motion page.
Score: 6 ticks or more makes a strong source. Fewer than 4, find another book.

## Where to find more brand books
- Brand Styleguide Document Showcase (PDF brand books): https://www.brandguidelines.net
- Branding style guidelines archive: https://brandingstyleguides.com
- Standards Manual (classic manuals as books, such as NASA and NYC Transit): https://standardsmanual.com
- Visual Journal (branding and graphic design projects): https://visualjournal.it
- Rebrand Gallery (rebrand videos and identities): https://www.rebrand.gallery
- Rebrand Gallery, AI brands: https://www.rebrand.gallery/industries/ai
- Rebrand Gallery, fintech brands: https://www.rebrand.gallery/industries/fintech
- Rebrand Gallery, warm brands: https://www.rebrand.gallery/feels/warm
- Brand New (identity reviews by Under Consideration): https://www.underconsideration.com/brandnew/
- Pentagram, all work: https://www.pentagram.com/work

## Real brand books to open today (free, official)
- GitHub: https://brand.github.com/
- Netflix: https://brand.netflix.com/
- Dropbox: https://brand.dropbox.com/
- Spotify (design and branding guidelines): https://developer.spotify.com/documentation/design
- Linear: https://linear.app/brand
- Vercel (Geist brand page): https://vercel.com/geist/brands
- Figma: https://www.figma.com/using-the-figma-brand/
- Pinterest: https://business.pinterest.com/brand-guidelines/
- Mozilla: https://brand.mozilla.com/
- Klarna: https://brand.klarna.com/
- Miro: https://brandkit.miro.com/corporate-visual-identity/the-miro-logo
- eBay Playbook: https://playbook.ebay.com/
- Herman Miller: https://brandstandards.hermanmiller.com/
- LinkedIn: https://brand.linkedin.com/
- Twitch: https://brand.twitch.com/
- Zoom: https://brand.zoom.com/
- Shopify: https://www.shopify.com/brand-assets
- Slack: https://slack.com/media-kit
- Mailchimp: https://mailchimp.com/about/brand-assets/
- SeatGeek: https://brand.seatgeek.com/
- Super.com: https://brand.super.com/

## Design systems that carry brand rules too
- IBM Carbon: https://www.carbondesignsystem.com/
- Google Material 3: https://m3.material.io/
- Microsoft Fluent 2: https://fluent2.microsoft.design/
- Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/

## Individual logos (Logosystem pages, credit the designer)
- Calendly, by Smith & Diction: https://logosystem.co/logo/calendly
- Deezer, by Koto: https://logosystem.co/logo/deezer-3
- Bolt, by Koto: https://logosystem.co/logo/bolt
- Aether Studios, by Drapz: https://logosystem.co/logo/aether-studios
- Aqua, by Alex Socoloff: https://logosystem.co/logo/aqua
- Dose, by Sungsik Kim: https://logosystem.co/logo/dose
- Elwood Bathhouse, by Roy: https://logosystem.co/logo/elwood-bathhouse
- More logos: https://logosystem.co
- Animated logos: https://logosystem.co/animated
- App icons: https://logosystem.co/app-icons

## Brand identities by designers on X (credit the designer)
- Drapz, brand guideline design: https://x.com/drapzdesigns/status/2105319736448020602
- Studio Bakers, Void Entertainment: https://x.com/studiobakers/status/2105580980790829386
- Swarnima, Cicely: https://x.com/swarnima_otw/status/2094679145771160055
- Swarnima, Bythlon visual identity guidelines: https://x.com/swarnima_otw/status/2098666300667248954
- Kyle Anthony, Synthetic: https://x.com/kyleanthony/status/2092388760776290527
- Praveen, O3SEC: https://x.com/praveenisomer/status/2098403688926593381
- Sajon, Arcana: https://x.com/sajon_co/status/2101891691896783088
- Penguin, Agentic Fabriq: https://x.com/penguindsgn/status/2104537313560908137
- Ifeoluwa Gideon, okeowo studios: https://x.com/IfeoluwaaGideon/status/2096693743436869682
- 1984 Los Angeles Olympics identity (posted by @luusssso): https://x.com/luusssso/status/2093399264156152284
- SEA Games 2027 concept, by @20_brahms: https://x.com/20_brahms/status/2094320052334211319

## DESIGN.md files ready to copy
- Refero Styles (2,000+ files, beta): https://styles.refero.design
- awesome-design-md (MIT): https://github.com/VoltAgent/awesome-design-md
- getdesign.md (the site behind those files): https://getdesign.md
- Power Design brand library (72 brand-style.md files, MIT): https://github.com/ItsssssJack/power-design/tree/main/brands
- awesome-claude-design (68 files, MIT): https://github.com/VoltAgent/awesome-claude-design
- A second extractor prompt, by rohitg00: https://github.com/rohitg00/awesome-claude-design/blob/main/prompts/brand-to-design-md.md
Refero says its files are not official brand guides, and the awesome-design-md files call themselves inspired readings. Use them as a starting shape. Then replace every value with your own.

## Read first
- The official DESIGN.md format, from Google Labs (Apache-2.0): https://github.com/google-labs-code/design.md
- Vercel on its own design.md: https://vercel.com/blog/how-our-agents-build-on-brand-pages-with-design-md
- Vercel's public file: https://vercel.com/design.md
- The Vercel CEO post that started the talk: https://x.com/rauchg/status/2094541309579235680

# Brand handoff checklist: Claude to Linearity
Send these items. Tick each one before you start. Linearity can set up your brand from your website address.

## Collect from your Claude project
- [ ] Website address: the live site your brand lives on.
- [ ] Logo files: SVG if you have it, PNG if not. One for light, one for dark, one icon-only.
- [ ] Colours: every hex code and its job. One accent only.
- [ ] Fonts: exact names and weights, plus where each one is from and its licence.
- [ ] Voice: three tone words and two real example lines.
- [ ] Never list: five things the brand never does.
- [ ] Final copy: the exact words, headline first. Do not ask the tool to rewrite them.
- [ ] The brief: one paragraph. What to make, and where it will be used.
- [ ] Sizes: one per line, in the order you need them.
- [ ] A reference draft: Claude Design's PDF export. Use it as a picture to compare against.

## Check after the brand loads
- [ ] The logo is your real logo, not a redraw.
- [ ] Every colour matches your hex codes.
- [ ] Both fonts show. If one is missing, fix it now.
- [ ] Click the headline and retype it. The text should be live.
- [ ] Photos stay as pixels. Text and shapes are the layers you edit.

## For each size
- [ ] Ask for one format per run. Do one, review it, then do the next.
- [ ] Check margins, safe areas and text size.
- [ ] Your original design stays untouched.

## Export
SVG, PDF, PNG or JPEG. Open the file and check it before you send it on.

# Your first Linearity run: Claude plans, Linearity builds the layers
About 10 minutes. Tick each box as you go.

1. In Claude Design, write your brief and your final copy, for example for a LinkedIn post.
   Done [ ]
2. In Linearity, set up your brand. Add your website address if it asks for one.
   Logo [ ]  Colours [ ]  Fonts [ ]
3. Paste your brief. Ask for ONE format only, for example one LinkedIn post.
   Right colours? [ ]  Right fonts? [ ]  Real logo? [ ]
4. Click the headline and retype it. Click a shape and move it.
   Text editable? [ ]  Shapes editable? [ ]
5. Need another size? Click the small Design dropdown, open History, reuse the same prompt and change the format.
   Or use AI Resize to make one new size.
   Layout looks right? [ ]  Margins safe? [ ]
6. Export an SVG, PDF or PNG. Open it.
   Looks the same as on screen? [ ]

Tip: one format per run gives the cleanest result.

R: Read my design. List every place an icon appears (navigation, buttons, feature cards, lists). Mark which ones are logos of real companies.
I: Use ONE icon set for every interface icon: Lucide. Load it with <script src="https://unpkg.com/lucide@latest"></script>, write each icon as <i data-lucide="name"></i>, and call lucide.createIcons() once. For company logos use Simple Icons (https://cdn.simpleicons.org/NAME/HEX). For AI companies use Lobe Icons (https://unpkg.com/@lobehub/icons-static-svg@latest/icons/NAME.svg). Then give me a short list of which icon you used where.
S: One set, one size (24px), one stroke width (2px). Icons take the text colour. Never draw a logo by hand. If neither source has a logo, write the company name as plain text and tell me. No decorative icons: no sparkles next to headings. Every icon sits next to visible text or has an aria-label. If the preview blocks the script, paste the SVG markup inline instead. Same set, same size.
E: At a glance the icons look like one family. The logos are the real marks. If I swapped Lucide for another set, the layout would not move. Show me the list, then fix anything that breaks these rules.

# Type and icons block for DESIGN.md
Two parts go into your DESIGN.md. The third part is for you. Swap the names for yours. Keep the rules.

## Part 1: tokens (top of the file, replace the typography: group)
```yaml
typography:
  headline-lg:
    fontFamily: Fraunces
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.02em
```

## Part 2: words (replace the Typography section, then add or replace Iconography)
```md
## Typography

Two fonts only. Both are free for commercial use.

- **Headlines:** Fraunces 600.
- **Body and labels:** Inter 400 and 600.
- Body is 16px with a 1.6 line height. Lines stay under 75 characters.
- Use no more than three weights anywhere.
- Load both with one link: <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
- Set --font-head (Fraunces) and --font-body (Inter) once. Never write a font name anywhere else.
- If the link does not load in the preview, say so. Never swap in a system font without telling me.

## Iconography

- One icon set: Lucide. 24px, 2px stroke. Icons take the text colour.
- Load it with <script src="https://unpkg.com/lucide@latest"></script>. Write <i data-lucide="rocket"></i>. Call lucide.createIcons() once.
- Company logos: Simple Icons, https://cdn.simpleicons.org/NAME/HEX. For AI companies: Lobe Icons, https://unpkg.com/@lobehub/icons-static-svg@latest/icons/NAME.svg
- Never draw a logo by hand. If neither source has it, write the company name as plain text and tell me.
- No decorative icons. No sparkles. Every icon sits next to visible text or has an aria-label.
- If the preview blocks the script, paste the SVG markup inline. Same set, same size.
```

## Part 3: where each one comes from (for you, not for Claude)
Checked 5 Oct 2026. Read the licence line before you ship.

Fonts
- Google Fonts, https://fonts.google.com . Free for commercial use. Mostly SIL Open Font License. A few use Apache or Ubuntu licences.
- Fontshare, https://www.fontshare.com . Free for personal and commercial use. Licence v2.0 (17 Aug 2026) lets you self-host on your own sites. You may not edit, subset or convert the files. Never hand the files to other people.
- Google Fonts MCP (pairings), https://github.com/sliday/google-fonts-skill . MIT. 73 pairings. Small project (16 stars), so read the code first.
- Fonts In Use, https://fontsinuse.com . Real fonts in real work. Nothing to download. Check each font's licence.
- Typewolf, https://www.typewolf.com/google-fonts . The 40 best free Google Fonts, with real sites using each. Nothing to download.

Icons
- Lucide, https://lucide.dev . ISC licence. About 150 icons from Feather are MIT. Keep the licence notice if you copy the source.
- Phosphor, https://phosphoricons.com . MIT. Six weights, so you change the feel by changing one weight.
- Iconify, https://iconify.design . Search many open icon sets at once. Each set has its own licence. Read it on the set page.
- Simple Icons, https://simpleicons.org . Real brand logos. The collection is CC0. Brands keep their trademarks. It has no OpenAI, LinkedIn, Microsoft or Slack mark today.
- Lobe Icons, https://icons.lobehub.com . Logos for AI companies, including OpenAI and Claude. The package is MIT. The logos stay trademarks of their owners.

Before you ship, pin the Lucide version: https://unpkg.com/lucide@1.52.0

# Section shopping list: [page name]
One gallery for each section. Fill one row per section. Then run the section remix prompt once for each row.

| Section | Gallery | My pick (link or screenshot) | What I like, in one line | What I will change | Credit line |
|---|---|---|---|---|---|
| Navbar | navbar.gallery | | | | Inspired by navbar.gallery, [pick] |
| Hero | landdding.com or scrolltide.co | | | | Inspired by [gallery], [pick] |
| CTA | cta.gallery | | | | Inspired by cta.gallery, [pick] |
| Footer | footer.design | | | | Inspired by footer.design, [pick] |
| 404 | 404s.design | | | | Inspired by 404s.design, [pick] |

## Rules
- One pick per section. Two picks make a mess.
- Copy the pattern, never the pixels, the words, the logo or the images.
- Write the credit line before you build. Keep it as a comment in your code.
- Build in this order: navbar, hero, CTA, footer, 404.
- Check each section at 390px wide before you start the next.

## After the five
- Do the sections still look like one page? If not, fix the colours and fonts first. Then the spacing.
- Keep a list of every gallery you used. Credit them in your video notes or your README.

# Gallery map: one gallery for each section
Checked on 5 Oct 2026. Every site below loads. Most show screenshots and links, not code. You still write the prompt.

| Section | Gallery | What it holds | Cost |
|---|---|---|---|
| Navbar | https://navbar.gallery | Navbars sorted by type: static, dropdown, mega menu, side bar, search bar, announcement | Free to browse |
| Hero | https://landdding.com | Website designs by category (SaaS, Startup, Technology and more) and by platform | Free to browse. A PRO tier exists |
| Hero or any section, with a ready prompt | https://scrolltide.co | Website prompts and templates. Copy a prompt, paste it into your AI | Paid. Lifetime access was $299 one-time on 5 Oct 2026. Some templates are free |
| CTA | https://cta.gallery | Call-to-action designs: buttons, forms, modals, newsletters, pricing pages | Free to browse |
| Footer | https://footer.design | Footers sorted by style: typographic, illustrative, grid, flat, animated, cards | Free to browse |
| 404 | https://404s.design | Creative 404 pages, sorted by style and by how they react | Free to browse |
| Sign-up form parts | https://component.gallery | Real components from design systems: 60 components, 95 design systems, 2,671 examples | Free |
| Launch posts | https://posts.design | Social posts that real brands ship: 680+ brands | Free to browse |
| Fresh work | https://recent.design | Recent web design, branding, OG images, app screenshots | Free to browse |
| Daily feed | https://inspora.design | A feed that updates hourly: web, branding, product, motion and more | Free to browse |

## Credit
- The navbar, footer, CTA and 404 galleries appear on two public lists. Credit both:
  - @iamtanzil_, 4 Oct 2026: https://x.com/iamtanzil_/status/2106710926145781986
  - @viktoroddy, 13 Sep 2026: https://x.com/viktoroddy/status/2099152986102796467
- landdding.com came to us through @VullnetAdemaj, 27 Sep 2026: https://x.com/VullnetAdemaj/status/2104169192438296889
- Credit the gallery and the pick in your own work. A line of text is enough.

# Flow teardown: [my flow, for example the Glaido sign-up]
Fill one block for each reference flow. Use numbers. Write what you see, not what you feel.

## Reference 1: [app name]
- Where I found it: [Mobbin, Refero or Inspo link]
- Number of steps:
- Fields it asks for, in order:
- The step where the user first gets value:
- Steps a user can skip (social sign-in, "later"):
- Where it feels slow or heavy:
- One thing to steal:
- One thing to never copy:

(Copy this block for references 2 to 5.)

## Compare
| Flow | Steps | Fields | First value at step | Skippable steps |
|---|---|---|---|---|
| Reference 1 | | | | |
| Reference 2 | | | | |
| Reference 3 | | | | |
| Reference 4 | | | | |
| Reference 5 | | | | |
| My flow now | | | | |
| My flow next | | | | |

## Decision
- Steps in my new flow:
- Fields in my new flow:
- What I move earlier:
- What I remove:
- What I keep because it is mine:
- Credit: [list the apps]

# Connector setup: Mobbin, Refero and Inspo
Checked on 5 Oct 2026 against each tool's own docs. The install lines are copied from those docs.

## Mobbin (needs a paid Mobbin plan)
- Plans with MCP: Pro, Team and Enterprise. A free account cannot connect. (docs.mobbin.com/mcp/introduction)
- Server address: https://api.mobbin.com/mcp
- Opening that address in a browser returns 401. That is normal. It needs your Mobbin login.
- Best route, in Mobbin's own words: add the Mobbin connector in Claude on desktop or web. Claude Code and Claude Design then share it.
  In Claude: Customize, then Connectors, then Add, then Browse connectors, then Mobbin. Click Connect. Sign in.
- Claude Code only:

    claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
    claude /mcp

  In the list, pick mobbin, choose Authenticate, and sign in when the browser opens.
- Tools: search_screens, search_flows, search_sections. Use search_flows for sign-up.
- Image links expire after 30 days. Save the screens you need.
- First test: Search Mobbin for onboarding screens from banking apps
- Optional official skills:

    claude plugin marketplace add mobbin/skills
    claude plugin install mobbin@mobbin

## Refero (needs a paid Refero plan)
- Plans: Pro, Team or Lifetime.
- Server address: https://api.refero.design/mcp
- Claude Code:

    claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"

  If you sign in with OAuth, leave out the --header part and follow the sign-in your client opens.
- It covers sites and apps, styles, screens, flows, images and similar screens.
- Limit: 8,000 MCP tool calls per monthly period for each licensed user.
- Optional skill, in Claude Code:

    /plugin marketplace add referodesign/refero_skill
    /plugin install refero@refero

## Inspo (free, no login)
- 832 sites and 2,320 screens, with a DESIGN.md for each site.
- One line. It finds Claude Code, Cursor, Codex, VS Code, Windsurf, Zed and Claude Desktop, then writes the config. Add --dry-run to see the plan first.

    npx -y inspo-mcp install

- Or point Claude Code at the hosted address yourself:

    claude mcp add --transport http inspo https://inspomcp.dev/api/mcp

- Its tools find whole sites and their pages. Check that a sign-up page was captured for each site you use.

## Check it works
- Ask Claude: "List the Mobbin tools you can use." You should see search_screens, search_flows and search_sections.
- If a tool is missing, run claude /mcp and read the status.

R: My brand and design system: [DESIGN.md, or logo, colours and fonts]. The page is [a sign-up page for my product]. One page I admire: [link].
I: Build five full, different versions of [the page]. Same brand, same colours, my design system. Totally different layouts. Name each version in three words and say what it gives up.
S: Version 1 is the safest. Version 5 is the boldest. No two versions share a hero layout. Keep my real words and logo. One main action per version.
E: Show all five side by side at 1440px and 390px wide. Rank them for clarity. Tell me which parts to mix, for example the hero of 2 and the footer of 4. Wait for my pick, then build the mix.

# bar.md: what makes [reference] good
Reference: [name and URL, or file]
Piece I am building: [what, and how big]
Date:

## How to write it
Write 5 to 7 mechanisms. A mechanism is a rule a critic can check by looking at a render.
- Useless: "Feels premium."
- Useful: "The headline is 5x the body size. There are three type sizes in total."
Write only what a person can see. Never write about the code.

## Mechanisms
1. Type: [sizes, weights, how many styles]
2. Colour: [how many colours, where the accent goes, how often]
3. Layout: [grid, alignment, what sits where]
4. Space: [how much air, where]
5. Motion: [what moves, how long, which direction]
6. Detail: [one small thing the reference does that most people miss]
7. (Optional) [anything else a critic can check by looking]

Examples to copy the style of:
- The headline is 5x the body size, with three type sizes in total.
- One accent colour, used at most twice per screen.
- Motion always resolves in one direction.
- Nothing animates for under 400ms.
- Whitespace above the fold is at least 40% of the frame.

## Rules for the critics
- Be harsh. Praise is not useful.
- Judge the render, never the code.
- Give a pass or a fail. Never a score.
- The craft critic puts ours next to the reference with labels stripped, says which is better, and names the single biggest gap.
- All three critics must pass: brief, system and craft.
- If a critic cannot see (no design-system.md, no render), say so. Do not carry on quietly.

## Round log
| Round | Brief | System | Craft | Biggest gap |
|---|---|---|---|---|
| 1 | | | | |
| 2 | | | | |
| 3 | | | | |

# Design checklist: 20 checks in five agent jobs
Source: the web rules in Jack's Power Design repo (github.com/ItsssssJack/power-design, principles/web-principles.md). Rule numbers match that file.
Each agent owns one job of four checks. Agents read the page and report. They never edit.

How to report each problem: the rule number, where it is, how bad it is (high, medium, low) and the fix in one line.

## Agent 1: Layout and phone
- [ ] 1. Mobile first. The 360px layout is the base. The page shell is 1200 to 1440px wide at most. Text columns are 75ch at most.
- [ ] 2. Breakpoints follow content. Each one exists because the layout breaks there. Test at 320, 768, 1024 and 1440px. No sideways scroll.
- [ ] 3. Fluid type and space. Sizes use clamp(). They do not jump at breakpoints.
- [ ] 4. Body text is 16px or more. Tap targets are 44 by 44px or more, with 8px between them.

## Agent 2: Type and rhythm
- [ ] 7. Scanning. Body text is left-aligned, never justified. A hero reads in a Z, with the main button where the eye ends. Headings start with the key word.
- [ ] 8. Line length is 45 to 75 characters. Text blocks use max-width: 65ch.
- [ ] 9. Line height is 1.5 or more for body text and 1.0 to 1.2 for big headings. The gap between paragraphs is 0.75em or more.
- [ ] 10. One spacing scale and one type scale. Every gap is 4, 8, 12, 16, 24, 32, 48, 64, 96 or 128px. Type sizes come from one ratio. No odd sizes such as 13px or 27px.

## Agent 3: Colour and states
- [ ] 11. Contrast. Text is 4.5:1 or more (large text 3:1). Icons, borders and focus rings are 3:1 or more. Colour is never the only signal.
- [ ] 12. Colour tokens. Components use names such as --bg, --fg and --accent, defined in OKLCH. No raw hex in components. Dark mode changes the tokens only.
- [ ] 13. Five states. Every button, link and input has default, hover, focus-visible, active and disabled. The focus ring is 2px or more and 3:1 or more.
- [ ] 14. Empty, loading and error states are designed. Loading shows a skeleton. Empty says what goes here and what to do next. An error sits next to its field and says how to fix it.

## Agent 4: Motion, speed and access
- [ ] 15. Motion takes 150 to 300ms and eases out. Reduced motion is respected. Nothing flashes more than 3 times a second. No autoplay that cannot pause.
- [ ] 16. Space is reserved. Images and embeds have width and height, or aspect-ratio. Layout shift (CLS) is under 0.1.
- [ ] 17. Speed budget on a mid-range phone. LCP under 2.5s, INP under 200ms, CLS under 0.1. Hero image 200KB or less. JavaScript 300KB or less (gzip). Two font families at most.
- [ ] 18. Structure. Real header, nav, main and footer. A skip link. One h1. No skipped heading levels. The whole page works with a keyboard only.

## Agent 5: Message and action
- [ ] 5. One main action per screen. One filled accent button per screenful, 44px tall or more. Repeat the same button down the page.
- [ ] 6. The first screen answers three questions in five seconds: what is this, who is it for, what do I do next. Check at 1366 by 768px and at 390px wide.
- [ ] 19. Forms. A visible label on every field, not only a placeholder. The right input type and autocomplete. Check each field on blur. Ask for the fewest fields.
- [ ] 20. Share layer. Title 60 characters or fewer. Description 155 or fewer. One 1200 by 630px share image. A favicon set. theme-color. JSON-LD for the main thing on the page.

## Every agent also flags
Dead buttons, broken links and leftover placeholder text. (An idea from the @Voxyz_ai post.)

# Fix list: [page name]
Page: [file or URL]    Date: [date]    Checked by: five agents

## Rules for this list
- Agents add rows. They never edit the page.
- The fixer changes nothing until the owner writes GO below.
- One fix per row. Say what to do, not only what is wrong.

| # | Agent (1-5) | Rule | Where | Problem | Fix | How bad | Status |
|---|---|---|---|---|---|---|---|
| 1 | 1 | 4 | Sign-up button, phone | Example: the tap target is 32px tall | Make it 44px tall | High | To do |
| 2 | | | | | | | |
| 3 | | | | | | | |
| 4 | | | | | | | |
| 5 | | | | | | | |

How bad: High means people cannot finish the task. Medium means it looks or works badly. Low means polish.
Status: To do, Fixed, or Skipped (write why).

## Approval
GO: [yes or no]    Date:

## After the fix
- [ ] Every failed check ran again and now passes
- [ ] Before and after screenshots saved at 390px and 1280px wide
- [ ] Each Skipped row has a reason

# The one-screen test
Run it on every version. Answer yes or no. Then count the parts. The version with the fewest parts and no "no" wins.

Built from Power Design web rules 5, 6 and 19, and the ideas in Steve Krug's book "Don't Make Me Think". No text from the book.

## Ten checks
1. One job. Can you say what this screen is for in ten words or fewer?
2. Five seconds. Show it for five seconds. Can a stranger say what it is, who it is for and what to do next?
3. One main button. Is there exactly one filled, accent-coloured button on the screen, 44px tall or more?
4. Clickable looks clickable. Do buttons and links look pressable? Does plain text look like plain text?
5. Labels. Does every field have a visible label, not only a placeholder?
6. Fewest fields. Does every field earn its place for today's job? Could you ask for it later?
7. Plain words. Does a stranger know every word at once?
8. Nothing extra. Remove one item that does not help the job. Does the job still work?
9. Familiar places. The logo at top left goes home. Menus sit where people expect them.
10. Phone. At 390px wide, can you finish with one thumb and no sideways scroll?

## Count the parts
| Version | Fields | Buttons | Links | Words | Checks passed (of 10) |
|---|---|---|---|---|---|
| A | | | | | |
| B | | | | | |
| C | | | | | |
| D | | | | | |
| E | | | | | |

Keep the winner. Then try to remove one more thing.

Here is my form: [paste the HTML, a URL or a screenshot].
Its one job is: [for example, get an email address to start a trial].

Make it as short as it can be and still do that job.
1. List every field. For each one, say if we need it today (yes or no) and why.
2. Remove every field we do not need today. We can ask for it later.
3. Use one column. Give every field a visible label, the right input type and an autocomplete value.
4. Use one main button. Its label starts with a verb and names the result, such as "Start free trial", not "Submit".
5. Show each error next to its field. Say what went wrong and how to fix it. Never clear what the person typed.
6. Mark optional fields "(optional)". If the form has steps, show "Step 2 of 3".

Show a before and after, the fields you removed, and a count: fields before, fields after.
Then run the one-screen test (one-screen-test.md) on the result and show me the score.

# Plain English for Claude: Jack's ELI5 style
Based on ASD-STE100 Simplified Technical English, a real writing standard from aerospace. This setup asks Claude to follow its spirit: small words, active voice, one idea per sentence. It does not make the output official STE.

## Set it up once in Claude Code
Copy everything in the block below and paste it into Claude Code. It saves the style file and turns it on. Restart Claude Code after.

```
Set my Output Style to the one below.
Save it in my global output-styles folder. Name the file after its name field.
Then set outputStyle to that name in my global settings file and in my local
project settings files. Create the folder or the key if either is missing.
Do not break the existing JSON.
Then list the files you changed and tell me to restart Claude Code.

---
name: ELI5
description: keep it simple pls
keep-coding-instructions: true
---
It's been a long day and my brain is fried, talk to me like I'm 5.
Only report to me in ASD-STE100 Simplified Technical English. That means approved plain words, active voice, and one instruction or idea per sentence.
Small words, short sentences, short paragraphs. If you have to use a big word, explain it right after. Only return what's actually necessary.
Just tell me what you did, did it work, what do I do now.
If I have to decide something: 2 options max, the context I need to pick fast, and which one you'd go with.
Keep paths and commands exact. I have no brain cells left for the rest.
```

## The quick version for any Claude chat
```
Only report to me in ASD-STE100 Simplified Technical English. Plain words, active voice, one idea per sentence. Just tell me what you did, did it work, what do I do now.
```

## What the real standard says
- Owner: ASD, the Aerospace, Security and Defence Industries Association of Europe. Current issue: Issue 9, January 2025.
- 53 writing rules and a dictionary of about 900 approved words.
- Up to 20 words in a sentence of instructions. Up to 25 in a description.
- Up to 6 sentences in a paragraph.
- Source: https://www.asd-ste100.org

# AI tells checklist (short)
From the catalogue in Jack's Slop Monster repo (github.com/ItsssssJack/SlopMonster, references/signs-of-ai-writing.md). That catalogue draws on Wikipedia's "Signs of AI writing". People write some of these too. Read each match in context. Do not edit by rote.

## 1. Words: cut them, or swap for a plain word
delve, tapestry, testament to, seamless, robust, navigate the landscape, in today's fast-paced world, it's important to note, unlock, supercharge, elevate, game-changing, harness the power of, dive deep, myriad, plethora, realm, ever-evolving, cutting-edge, transformative, paradigm shift, synergy, holistic, embark.
Check in context: leverage, foster, crucial, pivotal, streamline, empower, showcase, curated, compelling, innovative, comprehensive, journey, solution, effortless, intuitive, world-class, boost.
Fix: a plain word. "Leverage" becomes "use".

## 2. Shapes
- "Not just X, but Y" and "more than just": cut the first half, keep the claim.
- "Whether you're X or Y": name the one reader.
- "That's where X comes in": say what X does.
- "Say goodbye to": name what replaces it.
- "Imagine a": show it instead.
- Stacked hedges such as "may potentially": keep one at most.
- A question that answers itself ("The result? Faster."): write a sentence.
- A closing summary nobody asked for. A bold lead on every bullet.

## 3. Punctuation
- Two or more em dashes in one sentence.
- Four hyphenated compounds in one sentence.
- Many semicolons.

## 4. Rhythm
- A list of exactly three ("faster, smarter, better"). Keep a list only when every item adds something.

## 5. Proof
- Any number, user count, rating or quote you cannot show. Write [needs number] and ask the owner.

## Last check
- Does the first line answer the reader's first question?
- Does every sentence add something?
- Is every claim true, and can you show it?
- Would you say it out loud to a friend?
- Did you keep the writer's meaning?
A score of 5/5 only means no scored pattern matched. It does not prove the copy is clear or true.

# Poster sizes and bleed checklist
Checked 5 Oct 2026. Sources are at the bottom. Ask your printer first. Some want more bleed or a different file type.

## The rule in one line
Build the file at trim size plus bleed. Keep every word inside the safe margin.

- Trim: the final size after the poster is cut.
- Bleed: extra art past the trim, so no white edge shows. Add 0.125 in (3 mm) on all four sides.
- Safe margin: keep text and logos at least 0.25 in (6 mm) inside the trim.

## Print sizes, ISO A series, at 300 dpi
Pixels = inches x 300. The file size is the trim plus 3 mm on each side.

| Size | Trim (mm) | Trim in pixels | File with bleed (mm) | File in pixels |
|------|-----------|----------------|----------------------|----------------|
| A4 | 210 x 297 | 2480 x 3508 | 216 x 303 | 2551 x 3579 |
| A3 | 297 x 420 | 3508 x 4961 | 303 x 426 | 3579 x 5031 |
| A2 | 420 x 594 | 4961 x 7016 | 426 x 600 | 5031 x 7087 |
| A1 | 594 x 841 | 7016 x 9933 | 600 x 847 | 7087 x 10004 |
| A0 | 841 x 1189 | 9933 x 14043 | 847 x 1195 | 10004 x 14114 |

## Print sizes, US, at 300 dpi
The file size is the trim plus 0.125 in on each side.

| Size | Trim in pixels | File with bleed (in) | File in pixels |
|------|----------------|----------------------|----------------|
| 11 x 17 in | 3300 x 5100 | 11.25 x 17.25 | 3375 x 5175 |
| 18 x 24 in | 5400 x 7200 | 18.25 x 24.25 | 5475 x 7275 |
| 24 x 36 in | 7200 x 10800 | 24.25 x 36.25 | 7275 x 10875 |

## Social sizes
| Where | Ratio | Size | Note |
|-------|-------|------|------|
| Instagram feed | 4:5 | 1440 x 1800 px | Meta's size for feed image ads. JPG or PNG. |
| Instagram Story | 9:16 | 1440 x 2560 px | Keep the top 14%, the bottom 35% and the sides 6% free of text. |
| Pinterest Pin | 2:3 | 1000 x 1500 px | Taller than 2:3 may get cropped. |

A print poster is not a social post. Make a separate crop for each place. Do not reuse the print safe margin.

## Before you send it
- [ ] The file is trim plus bleed in size.
- [ ] Art runs to the edge of the bleed. No white strip.
- [ ] All text sits 6 mm (0.25 in) inside the trim.
- [ ] Fonts are embedded in the PDF.
- [ ] Photos are 300 dpi at the final size. For a large poster, 150 to 250 dpi is fine.
- [ ] Colour: printers ask for CMYK. Ask yours to convert, or convert before you send. Expect small shifts.
- [ ] File type is PDF. It keeps layout and fonts.
- [ ] You looked at a proof, or a small test print.
- [ ] Each social crop is made for its own place.

## Sources
- ISO 216 A series sizes: https://en.wikipedia.org/wiki/ISO_216
- Bleed, safe margin, dpi, CMYK, file type, US sizes: https://www.vistaprint.com/hub/poster-printing-preparation-guide
- Instagram feed: https://www.facebook.com/business/ads-guide/image/instagram-feed
- Instagram Story: https://www.facebook.com/business/ads-guide/image/instagram-story
- Pinterest: https://help.pinterest.com/en/business/article/pinterest-product-specs

# Poster in code: starter
One HTML file that draws a true-size print poster, with bleed and safe-zone guides. It prints to a one-page vector PDF.
Tested 5 Oct 2026 in Chrome 154: one page, about 426 x 600 mm (A2 with 3 mm bleed), fonts embedded, no raster images.

## 1. The starter prompt
Paste this into Claude Code or Claude Design. Save poster.html (section 2) in the folder first.

```
Make a poster in code. Use poster.html in this folder as the base. Do not change the sheet, bleed or safe-zone setup.
Subject: [what the poster is for].
Facts: [title, date, place, one line]. Use only these facts. Invent nothing else.
Style: [one reference image or link, or three plain words].
Rules: draw in HTML, CSS and inline SVG only. Size everything in mm. Art may run into the bleed. Text stays inside the safe margin. One big thing to look at first. Two typefaces at most.
Show me a small preview first. Then press G to show the guides and check them. Then export the PDF.
```

## 2. poster.html
Open it in a browser. Press G to show the guides: red is the trim line, blue is the safe line. The guides never print.
For another size, change --trim-w, --trim-h and the @page line. The @page line cannot read variables.

```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Poster starter</title>
<style>
/* A2 portrait: 420 x 594 mm trim, 3 mm bleed, 6 mm safe margin.
   Another size? Change --trim-w, --trim-h, and the @page line (it cannot read variables). */
:root { --trim-w: 420mm; --trim-h: 594mm; --bleed: 3mm; --safe: 6mm; --paper: #f3efe6; --ink: #151515; --accent: #e5532d; }
@page { size: 426mm 600mm; margin: 0; }          /* trim + 2 x bleed */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #2a2a2c; }
body { font-family: "Helvetica Neue", Arial, sans-serif; color: var(--ink); }

/* The sheet is the full file: trim size plus bleed on every side. */
.sheet { position: relative; overflow: hidden; background: var(--paper);
  width: calc(var(--trim-w) + 2 * var(--bleed)); height: calc(var(--trim-h) + 2 * var(--bleed)); }

/* Art goes here. It may run all the way to the edge of the sheet, so it bleeds. */
.art { position: absolute; inset: 0; }
.art .disc { position: absolute; width: 300mm; height: 300mm; border-radius: 50%; background: var(--accent);
  right: -60mm; top: 250mm; }

/* Text goes here. It stays inside the safe margin, so nothing is cut at the trim. */
.safe { position: absolute; inset: calc(var(--bleed) + var(--safe)); display: flex; flex-direction: column; }
h1 { font-size: 74mm; line-height: .86; letter-spacing: -.02em; font-weight: 800; }
.line { font-size: 12mm; line-height: 1.15; max-width: 250mm; margin-top: 12mm; }
.facts { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm; font-size: 6.5mm; line-height: 1.3; border-top: .6mm solid var(--ink); padding-top: 5mm; }
.facts b { display: block; font-size: 4.2mm; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }

/* Guides: add ?guides to the address, or press G. They never print. */
.guides::before, .guides::after { content: ""; position: absolute; pointer-events: none; z-index: 5; }
.guides::before { inset: var(--bleed); outline: .4mm dashed #e11; }                          /* trim line */
.guides::after  { inset: calc(var(--bleed) + var(--safe)); outline: .4mm dashed #19c; }      /* safe line */

/* On screen, shrink the sheet to fit the window. */
@media screen { .sheet { zoom: var(--fit, .35); margin: 0 auto; } }
@media print  { html, body { background: none; } .guides::before, .guides::after { display: none; } }
</style>
</head>
<body>
<main class="sheet" id="sheet">
  <div class="art"><div class="disc"></div></div>
  <div class="safe">
    <h1>Your<br>title<br>here</h1>
    <p class="line">One line that says what this poster is for.</p>
    <div class="facts">
      <div><b>When</b>[Date and time]</div>
      <div><b>Where</b>[Place]</div>
      <div><b>More</b>[Web address]</div>
    </div>
  </div>
</main>
<script>
const sheet = document.getElementById('sheet');
const fit = () => {
  // Measure the sheet at full size, then scale it to fit the window. Works for any poster size.
  sheet.style.setProperty('--fit', 1);
  const r = sheet.getBoundingClientRect();
  sheet.style.setProperty('--fit', Math.min(1, (innerWidth - 32) / r.width, (innerHeight - 32) / r.height));
};
addEventListener('resize', fit); fit();
if (location.search.includes('guides')) sheet.classList.add('guides');
addEventListener('keydown', e => { if (e.key.toLowerCase() === 'g') sheet.classList.toggle('guides'); });
</script>
</body>
</html>
```

## 3. Export
Mac, with Chrome installed:

```
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --no-pdf-header-footer --print-to-pdf=poster.pdf poster.html
```

Optional: a 300 dpi PNG from the PDF. It needs poppler (brew install poppler).

```
pdftoppm -r 300 -png -singlefile poster.pdf poster
```

The PDF page can be about 0.1 mm wider than the sheet. That sliver sits inside the bleed and is cut off.
Send the PDF to the printer. Use the PNG for a preview or a social post. Make the social crop separately: see poster-sizes-and-bleed.md.

R: The subject is [what the scene shows, for example a koi pond at dusk]. The mood is [three plain words]. One reference: [a photo or a link]. Use three-starter.html in this folder as the base.
I: Build one HTML file with Three.js loaded from a CDN with an import map. Pin the version. The scene fills the window. People can orbit and zoom. One thing in the scene reacts to the cursor.
S: Name one choice each for camera, light, material and motion. Use simple shapes. Use instancing for anything that repeats. Cap the pixel ratio at 2. Idle motion is a gentle drift, never a slow zoom. Turn motion off for people who ask for reduced motion.
E: Open it in a browser and fix every console error. Test at 390 px wide and at 1440 px wide. Report renderer.info.render.calls and triangles. If they are high, cut shapes until a phone can run it. Show me a screenshot at each width.

<!doctype html>
<html lang="en">
<head>
<!-- Single-file Three.js starter. Open it in a browser. No install.
     Three.js 0.186.1 loads from the jsDelivr CDN (checked 5 Oct 2026).
     For a real site, download Three.js and serve it from your own host. -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Three.js starter</title>
<link rel="icon" href="data:,">
<style>
  html, body { margin: 0; height: 100%; background: #0b0d12; overflow: hidden; }
  canvas { display: block; touch-action: none; }
  #hint { position: fixed; left: 16px; bottom: 16px; color: #9aa3b2; font: 13px/1.4 system-ui, sans-serif; }
</style>
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/"
  }
}
</script>
</head>
<body>
<div id="hint">Drag to orbit. Scroll or pinch to zoom.</div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;

// Renderer: cap the pixel ratio at 2 so phones stay smooth.
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0d12);
scene.fog = new THREE.Fog(0x0b0d12, 8, 20);

const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
camera.position.set(3.2, 2.2, 4.2);

// Light: one soft sky light and one key light.
scene.add(new THREE.HemisphereLight(0xbcd0ff, 0x1a1d26, 1.1));
const key = new THREE.DirectionalLight(0xffffff, 2.2);
key.position.set(3, 5, 2);
scene.add(key);

// The object. Swap this block for your own model or shape.
const knot = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.9, 0.3, 160, 24),
  new THREE.MeshStandardMaterial({ color: 0xea580c, roughness: 0.35, metalness: 0.2 })
);
knot.position.y = 1.2;
scene.add(knot);

// A floor, so the scene has a place to sit.
const floor = new THREE.Mesh(
  new THREE.CircleGeometry(8, 64),
  new THREE.MeshStandardMaterial({ color: 0x1a1d26, roughness: 0.9 })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Orbit controls: drag to look around, with a soft stop.
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1.1, 0);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI / 2 - 0.05;   // never go under the floor
controls.minDistance = 2.5;
controls.maxDistance = 9;

let last = 0;
renderer.setAnimationLoop((now) => {
  const dt = Math.min((now - last) / 1000, 0.1);   // seconds since the last frame
  last = now;
  if (!reduceMotion) { knot.rotation.y += dt * 0.6; knot.rotation.x += dt * 0.2; }
  controls.update();
  renderer.render(scene, camera);
});

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

// Performance check: type stats() in the console. Watch draw calls and triangles on your phone.
window.stats = () => ({ calls: renderer.info.render.calls, triangles: renderer.info.render.triangles });
window.__ready = { objects: scene.children.length, three: THREE.REVISION };
</script>
</body>
</html>

# The design folder: scaffold
A folder of design files that Claude reads at the start of every project. Copy the pattern. Fill it with your own taste.
Start small. DESIGN.md and taste/inspo.md already beat a blank chat. Add the rest one file at a time.

## 1. The tree
```
design-os/
  CLAUDE.md            What to read first, in order. Keep it short.
  DESIGN.md            Your brand: colour, type, space, shape, motion, voice, bans.
  taste/
    inspo.md           Links to pieces you admire. One line each: what to steal.
    references/        Screenshots of the real pieces you copy from.
  rules/
    web-20.md          The pre-ship 20-point checklist (preship-20.md).
    words.md           Plain English rules and banned phrases.
    bar.md             Checkable traits of the reference you must beat.
  assets/              Logos, one icon pack, fonts. Real files only.
  skills/              One folder per winning style: SKILL.md, a short PROMPT.md, a check.
  checks/
    preship.py         Runs the static checks on any HTML file.
  memory/
    corrections.md     Every fix you ask for, written as a rule.
  projects/
    [your-project]/    brief.md, drafts, final. One folder per piece.
```

## 2. Make it
Run this once, in your project folder:

```
mkdir -p design-os/{taste/references,rules,assets,skills,checks,memory,projects}
touch design-os/{CLAUDE.md,DESIGN.md} design-os/taste/inspo.md design-os/rules/{web-20.md,words.md,bar.md} design-os/memory/corrections.md
```

Copy preship-20.md into rules/web-20.md. Save the script in section 3 as checks/preship.py.

## 3. The starter files

### CLAUDE.md
```
# Read this first
Before any design work, read these files in this order.
1. DESIGN.md. It is the brand. It wins over your own taste.
2. taste/inspo.md and taste/references/. This is the taste to match.
3. rules/web-20.md, rules/words.md and rules/bar.md.
4. memory/corrections.md. These are past mistakes. Do not repeat them.

Then work like this.
- Say in six lines what you read and which rules apply.
- Never invent a colour, font, logo or icon. Use DESIGN.md and assets/ only.
- If my request clashes with DESIGN.md, stop and ask.
- Before you say done, run checks/preship.py and the 20-point list.
- When I correct you, add the fix to memory/corrections.md as one rule.
```

### DESIGN.md
```
# DESIGN.md: [brand name]
Fill every line. Use numbers and hex codes, not adjectives.

## One line
[What the brand is, and how it should feel, in one sentence.]

## Colour
- Background: #
- Text: #
- Muted text: #
- Accent (one only): #
- Border: #
- Never use: [colours the brand never shows]

## Type
- Font: [name and source link]
- Sizes: H1 [px], H2 [px], body [px]
- Weight and case:

## Space and shape
- Spacing unit: [4 or 8] px
- Corner radius: [px]
- Shadows: [none, or the one allowed]

## Buttons
- Primary: [fill, text colour, radius, one example label]
- Secondary: [style]

## Motion
- Speed: [ms] and easing: [ease-out]
- What may move: [list]
- Never: [list]

## Voice
- Plain English. Short sentences.
- Words to use: [list]
- Words never to use: [list]

## Bans (add one every time the output drifts)
1.
2.
3.
```

### taste/inspo.md
```
# inspo.md: taste, as links
One line each: the link, then what to steal. Steal the structure, never the content.
Last checked: [date]

## Websites
- [link]: [what to steal, for example the empty-state layout]

## Posters and print
- [Savee board link]: [what to steal]

## Flows (sign-up, checkout)
- [Mobbin or Refero link]: [what to steal]

## Motion
- [link]: [what to steal]

## Do not resemble
- [pieces you like but must not copy]
```

### rules/bar.md
```
# bar.md: what the reference does well
Read the reference. Write 5 to 7 traits you can check. A trait is a fact, not an adjective.
Good: the headline is 5 times the body size. Bad: it feels premium.

Reference: [link or file]
1. [trait]
2. [trait]
3. [trait]
4. [trait]
5. [trait]

After each draft, score every trait pass or fail. Our piece must pass them all.
```

### rules/words.md
```
# words.md: plain English
- Short, active sentences. One idea each.
- Small, common words. Say "use", not "utilise".
- No em dashes. No emoji.
- Use numbers and names, not adjectives.
- Banned words: seamless, unlock, elevate, effortless, cutting-edge, journey, game-changer.
- Banned shape: "not just X, but Y".
- Before you ship, run the copy through SlopMonster until it scores 5 of 5.
```

### memory/corrections.md
```
# corrections.md
One rule per fix. Add the date. Claude reads this before every project.

- Example: No sparkle or star icons. Use the icon pack in assets/.
```

### projects/[your-project]/brief.md
```
# Brief: [name]
Goal: [one sentence]
Who opens it, and on what device: [person, phone or laptop]
The one action they take next: [action]
Reference to beat: [link]
Facts allowed on the page: [list. Nothing else.]
Done when: all 20 points in rules/web-20.md pass.
```

### checks/preship.py
```python
#!/usr/bin/env python3
"""preship.py: static checks for one HTML file. Python 3 only, no installs.
Run:  python3 checks/preship.py path/to/page.html
It checks what a script can see (checklist points 3, 16, 18, 19 and 20, in part).
It cannot judge taste, contrast or speed. Do those by eye and with Lighthouse."""
import re, sys
from html.parser import HTMLParser

class P(HTMLParser):
    def __init__(s):
        super().__init__(); s.tags = []; s.title = ''; s.in_title = False
        s.meta = {}; s.labels_for = set(); s.inputs = []; s.imgs = []; s.links = []
    def handle_starttag(s, tag, a):
        a = dict(a); s.tags.append(tag)
        if tag == 'title': s.in_title = True
        if tag == 'meta':
            k = a.get('name') or a.get('property')
            if k: s.meta[k.lower()] = a.get('content', '')
        if tag == 'label' and a.get('for'): s.labels_for.add(a['for'])
        if tag == 'input' and a.get('type', 'text') not in ('hidden', 'submit', 'button', 'checkbox', 'radio'):
            s.inputs.append(a)
        if tag == 'img': s.imgs.append(a)
        if tag == 'link': s.links.append(a)
        if tag == 'html': s.meta['_lang'] = a.get('lang', '')
    def handle_endtag(s, tag):
        if tag == 'title': s.in_title = False
    def handle_data(s, d):
        if s.in_title: s.title += d

def run(path):
    h = open(path, encoding='utf-8', errors='ignore').read()
    p = P(); p.feed(h); t = p.tags; m = p.meta
    labelled = [i for i in p.inputs if i.get('id') in p.labels_for or i.get('aria-label') or i.get('aria-labelledby')]
    viewport = m.get('viewport', '')
    checks = [
        ('18  html has a lang attribute', bool(m.get('_lang'))),
        ('18  exactly one h1', t.count('h1') == 1),
        ('18  main landmark present', 'main' in t),
        ('18  header or nav, and footer present', ('header' in t or 'nav' in t) and 'footer' in t),
        ('3   viewport meta present, zoom not blocked', 'width=device-width' in viewport and 'user-scalable=no' not in viewport and 'maximum-scale=1' not in viewport.replace(' ', '')),
        ('20  title is 1 to 60 characters', 1 <= len(p.title.strip()) <= 60),
        ('20  meta description is 1 to 155 characters', 1 <= len(m.get('description', '')) <= 155),
        ('20  og:image is set', bool(m.get('og:image'))),
        ('20  theme-color is set', bool(m.get('theme-color'))),
        ('20  favicon link is set', any('icon' in (l.get('rel') or '') for l in p.links)),
        ('16  every img has width and height', all(i.get('width') and i.get('height') for i in p.imgs)),
        ('18  every img has an alt attribute', all('alt' in i for i in p.imgs)),
        ('19  every form input has a visible label or aria-label', len(labelled) == len(p.inputs)),
    ]
    fails = 0
    for name, ok in checks:
        print(('PASS  ' if ok else 'FAIL  ') + name); fails += (not ok)
    print(f'\n{len(checks) - fails}/{len(checks)} pass')
    return fails

if __name__ == '__main__':
    if len(sys.argv) != 2: sys.exit('usage: python3 preship.py page.html')
    sys.exit(1 if run(sys.argv[1]) else 0)
```

## 4. How the pattern maps to Jack's own setup
Jack does not keep one folder with this name. His pieces live in separate skills and project folders. This scaffold puts the same layers in one place.

| Your folder | Jack's version |
|-------------|----------------|
| taste/inspo.md | References from Savee, Refero and Mobbin, plus his Five Shelves page of 40 sites |
| DESIGN.md | One brand-style.md per brand. Power Design holds 72, Glaido's included |
| rules/web-20.md | The 20 web rules in Power Design (principles/web-principles.md) |
| rules/bar.md | The teardown step of his Design Loop skill: 5 to 7 checkable traits of the reference |
| skills/ | Style skills made by Design DNA: a record, a 2 KB prompt and a check script per style |
| assets/ | His asset skill: a licensed icon library, Lottie files and a logo kit |
| rules/words.md | SlopMonster and a plain English (ASD-STE100 style) setup |
| checks/ | Check scripts that fail a build, for example the deck gate in his Horizon Strike skill |
| memory/corrections.md | His feedback notes: each correction saved as a rule, such as no sparkle icons |

Public parts: Power Design https://github.com/ItsssssJack/power-design and SlopMonster https://github.com/ItsssssJack/SlopMonster (both MIT licence).

# Pre-ship checklist: 20 points
Twenty yes-or-no checks to run on a page before it goes live. They come from the 20 web rules in Jack's Power Design repo (principles/web-principles.md). Each point names its rule.

How to use it: paste this list under your page and ask Claude to answer yes or no for every point, with proof. Fix every no. Run it again until all 20 are yes.

1. [ ] Mobile first. The 360 px layout works with no media queries. The page shell stops at 1440 px wide. Text blocks stop at 75 characters wide. (Rule 1)
2. [ ] You tested at 320, 390, 768, 1024 and 1440 px. Nothing scrolls sideways. Every breakpoint has a visible reason. (Rule 2)
3. [ ] Type and spacing use clamp(). No raw vw units on type. Text still zooms to 200%. The viewport tag does not block zoom. (Rule 3)
4. [ ] Body text is 16 px or more. Tap targets are 44 by 44 px or more, 8 px apart. (Rule 4. 44 is Apple's size. The WCAG AA minimum is 24 by 24.)
5. [ ] One main button per screen, in the accent colour. Repeat the same button down a long page. (Rule 5)
6. [ ] The first screen says what this is, who it is for and what to do next. True on a 1366 by 768 laptop and on a 390 px phone. (Rule 6)
7. [ ] Body text is left-aligned. Nothing is justified. A hero reads in a Z, with the button at the end. (Rule 7)
8. [ ] Lines are 45 to 75 characters long. (Rule 8)
9. [ ] Body line height is 1.5 or more. Headlines are 1.0 to 1.2. (Rule 9)
10. [ ] Spacing sits on an 8-point grid. Sizes come from one scale. No odd sizes such as 13 or 27 px. (Rule 10)
11. [ ] Text contrast is 4.5 to 1, or 3 to 1 for large text. Icons and focus rings are 3 to 1. Colour never carries meaning alone. (Rule 11. WCAG 1.4.3)
12. [ ] Colours are named tokens such as --bg and --accent. No loose hex codes in the styles. Dark mode reuses the same names. (Rule 12)
13. [ ] Every button, link and field has five states: default, hover, focus, pressed and disabled. The keyboard focus ring is visible. (Rule 13)
14. [ ] Empty, loading and error states are designed. Errors sit next to the field. (Rule 14)
15. [ ] Motion runs 150 to 300 ms and eases out. Reduced motion is respected. Nothing autoplays without a pause button. (Rule 15)
16. [ ] Images and embeds have a set size, so the page does not jump while it loads. (Rule 16)
17. [ ] On a mid-range phone: LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less. Jack's budget: hero image 200 KB, JavaScript 300 KB. (Rule 17. Core Web Vitals, measured at the 75th percentile.)
18. [ ] One h1. Real header, nav, main and footer. A skip link. The tab order matches the page. (Rule 18)
19. [ ] Forms: every field has a visible label, the right input type and an inline error. No extra fields. (Rule 19)
20. [ ] The share layer is set: title 60 characters or fewer, description 155 or fewer, a 1200 by 630 share image, a theme colour and a favicon. (Rule 20)

## What a script can check
checks/preship.py (in the design folder scaffold) tests part of points 3, 16, 18, 19 and 20. It cannot judge contrast, taste or speed. Check those by eye, with Lighthouse, or with a second agent.

## Sources
- Jack's 20 web rules: https://github.com/ItsssssJack/power-design/blob/main/principles/web-principles.md
- Core Web Vitals thresholds: https://web.dev/articles/vitals
- Text contrast (WCAG 1.4.3): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- Minimum target size (WCAG 2.5.8, 24 by 24 px): https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- Apple's 44 by 44 point tap size: https://developer.apple.com/design/tips/