Detailed content
🧩 Design Became Code — The Shift in Surface
For more than 20 years, design lived in another app: you drew in an editor, and a team rebuilt it in code somewhere else. Today, the design surface is the code itself. You describe it, the agent generates the interface directly in HTML/CSS — and you iterate right there.
The recognition that the interface now takes shape in code, and that the agent designs it based on your descriptions.
People who understand this stop treating design as a "separate step" and start iterating on visuals and code in the same place — much faster.
Design surface = code · iteration in the same environment · design as a system, not an isolated act.
🔁 Where design lives—before and now
- •Before: design in the prototyping app → engineering rebuilds it in code → two sources of truth.
- •Now: you describe it in Claude Code → it generates HTML/CSS → you adjust it on the spot, all in the same place.
- •The "design → deliver → rebuild" cycle became a single conversation loop.
⚠️ The Achilles’ heel
AI, by default, is poorly designed. It doesn't "feel" what is beautiful or know why a good screen is good. If you only ask "make it look nice," you get the same old generic look. The rest of the module addresses exactly that.
🎯 Code "good design" — the idea that unlocks everything
The module’s turning point fits in one sentence: if we encode what good design is, AI can reliably reproduce good design. Good design has rules — proportion, spacing, contrast, hierarchy. When they become a file the agent reads and follows, quality stops being a matter of luck and becomes a system.
Write objective rules in a file the agent reads that make a screen good.
It’s what separates a “generic AI page” from “this feels like a real product.”
Cognitive load (understood in ~3 s) · white space · text proportions · even spacing · nothing touching the edges.
✓ The rules that make it “look professional”
- ✓Glanceable in ~3 s (system 1, not system 2).
- ✓Generous white space and equal spacing between elements.
- ✓Consistent ratio between text sizes (hierarchy).
- ✓Breathing room: nothing should touch the edges.
✗ What “gives away” amateurism
- ✗Too much text—the 3-second read is gone.
- ✗Elements pressed against the edge of the screen.
- ✗Uneven spacing and random font sizes.
- ✗"Make it look good" without any rules loaded.
📐 The golden ratio as a shortcut
"Apple-level" websites aren’t beautiful by chance: the ratios between text sizes, consistent spacing, and breathing room follow a proportion (~1.618). And AI is a an intern with an IQ of 500: capable, but without the right measuring stick it "eats crayons." Give it the measuring stick — it delivers senior-level work.
🖼️ Design skills — open-design and power-design
A good designer has many colors in the brush. Here, your "colors" are the skills. Two form the foundation: open-design (a local studio for building brand systems) and power-design (universal rules the agent loads before building slides and screens).
open-design = local open-source UI with ready-made examples and support for multiple models. power-design = repository of rules (cognitive load, white space, proportion, hierarchy).
open-design offers versatility and brand consistency; power-design gives you "Apple-level" decks and screens without being a designer.
Local UI · design systems · choosing a coding agent · ~3 seconds to understand · ~10 words per screen as a limit.
🪜 Step by step — open-design (local studio)
- In Claude Code, ask it to clone the repository from open design and open the project.
- Ask to install dependencies and run the application (it launches its own interface).
- In the UI, choose your agent of code (e.g., Claude Code) and complete the setup.
- Use a gallery example (dashboard, kanban) as a base and build your design system.
Load power-design before building
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 s), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
🔍 Extract visual identity — design-language-skill
The heart of the module: extract, don’t copy. You point to a reference you admire, and the design-language-skill generates a blueprint — palette, fonts, scale, spacing, layout scaffold—to reuse in your project with its own identity.
A skill that generates a design blueprint (colors, fonts, scale, spacing, layout) from a website/screenshot.
It’s the shortcut to giving your project “the vibe” of excellent references. Extraction ≠ copying: you capture the reason, not someone else’s code.
Brand extraction · blueprint/design tokens · layout scaffolding · multiple dimensions (color, typography, spacing, rhythm).
Point to the reference
Install the skill and tell the agent the reference site and what your business is.
Get the blueprint
Colors, fonts, spacing, and scale—with a reference screenshot, too.
Build and iterate
Ask for the screen using the blueprint, then refine it with brief feedback: "more breathing room here", "logo in the bottom-left corner".
🚫 The red line
Try to reproduce the code from the reference creates a mess and copyright issues. Extract the language of the design (color, font, spacing, rhythm) — not the code. An original identity, inspired vibe.
🎬 AI images, animation, and 3D — the finishing touches
With the foundation in place, the visuals elevate everything: AI-generated images (including with text in the image) for hero images and brand assets, plus subtle loops and 3D that add finesse. Note: this is finishing touches, not the foundation — comes last.
AI image generation/editing to illustrate screens, plus background animations and 3D assets that add depth.
The right image elevates any interface; generating 20 variations in the same style saves hours.
Style reference · guided editing to "fit" the background · consistent batch · start frame = end frame · prefer 4K · 3D as a finishing touch.
🖌️ Practical visual workflow
- •Image: generate the base by describing the style; if it doesn’t contrast with the background, ask the agent to write an editing prompt (position, contrast, crop) and adjust.
- •Batch: use an image as a reference and generate 20 consistent variations (same palette, lighting, and visual language).
- •Loop: ensure the opening and closing frames match; generate it a few times until the seam is clean.
- •3D: assets (e.g., via Spline) are added as finishing touches and validated at high resolution.
Generate a hero image in the brand’s style
Generate a hero image in this brand’s style: [palette and description]. If it doesn’t contrast with the background, write an editing prompt to adjust the contrast and position so the image fits perfectly into the website background.
🧱 Your reusable design system
Everything comes together here. Think of universal Lego pieces: spacing, fonts, proportions, and colors are standardized building blocks. Consolidate them into a design system your — tokens, branding, components—that the agent reuses in every project.
Consolidate the palette, typography, spacing, components, and rules into a reusable design system.
Consistency becomes the norm. You stop re-deciding colors/fonts for every screen.
Design tokens · component library · brand kit · reuse across projects · palette by meaning (blue = trust/data).
🪜 Step by step — consolidate the system
- Define palette (use a palette platform as a reference) and typography.
- Record tokens and rules in a file the agent can read in any project.
- With every new screen, reference this design system to maintain consistency.
Going deeper (optional): why choose colors by meaning
Color is more than aesthetics—it conveys a message. Blue signals trust and data density, which is why so many dashboards and SaaS products use blue. Choosing a palette based on what your business represents (rather than your preference of the day) is what makes the system durable across projects.
Self-check (optional): why does encoding design rules improve AI results?
🛠️ Guided Hands-On Example
Goal: create a one-section landing page (hero) that looks professional on the first generation, with an identity drawn from a reference and a cohesive visual asset.
- Set the stage. Open Claude Code in an empty project folder.
- Load the rules. "Clone power-design, install it, and study all the rules before building."
- Extract the identity. With the design-language-skill, point to the reference and your theme; get the blueprint.
- Build the hero. "Create a one-section landing page applying the power-design blueprint and rules. A one-sentence value proposition, lots of white space, nothing touching the edges."
- Add the visual design. Generate the hero image in the brand’s style; if it lacks contrast, ask for an editing prompt.
- Refine with brief feedback. "Match the spacing; keep the title-to-subtitle ratio proportional; put the logo in the bottom-left corner."
- Validate the 3 seconds. Look at the screen for 3 s—can you tell what it’s about? If so, it passes the test.
Quality criterion: clear hierarchy, breathing room at the edges, a one-sentence value proposition, and consistency across text, color, and imagery.
✏️ Exercises
1. Brand blueprint (easy)
Choose a site you admire and extract its blueprint with the design-language-skill. Success: file with color, typography, spacing, and a hierarchy note.
2. Scannable Slide (easy)
Use power-design to generate a single slide about a topic of your choice. Success: understandable in ~3 s, max. ~10 words, with visible breathing room in the margins.
3. Hero with a Matching Image (medium)
Build a one-section hero and add an AI-generated image in the brand’s style. Success: the image has good contrast, and the value proposition fits in one sentence.
4. Subtle loop (medium)
Generate a looping background animation (start frame = end frame). Success: with no visible "jump" at the seam and in high resolution.
5. Minimal design system (medium)
Consolidate the palette + typography + 2 components in a file, then generate a second screen that references it. Success: the two screens look like the same brand without redefining colors/fonts.
⌨️ Ready-to-use prompts
Use them as a starting point. When the canonical prompt is in English (to paste into the original reference), the original is included too. The complete collection is in the Library → Prompts.
Load and study design rules (power-design)
Clone o repositório do power-design, instale e estude todas as regras de design. Antes de construir qualquer tela, aplique: cognitive load baixo (legível em ~3 segundos), white space generoso, nada encostando nas bordas e proporção consistente entre tamanhos de texto.
Extract visual identity (design-language-skill) — canonical
Use the design-language-skill with this reference: [URL or screenshot]. My business is: [one-sentence description]. Generate a design blueprint with a color palette, typography, size scale, spacing, and a layout scaffold. Don't copy the reference code—extract the reasoning behind the design.
Original (EN):
Extract this website's design identity (palette, typography, scale, spacing, layout scaffold) into a reusable blueprint. Do not copy the code — capture why the design works, then rebuild a new hero section applying universal design rules (cognitive load, white space, proportion).
Build the hero using the blueprint
Crie uma landing de 1 seção (hero) aplicando o blueprint extraído e as regras do power-design. Proposta de valor em uma frase. Pouco texto. Muito respiro. Hierarquia clara entre título e subtítulo.
Consolidate the reusable design system
Consolidate a reusable design system: palette, typography, spacing, tokens, and base components. Save it in a file you can read in any future project to maintain consistency.
⚠️ Common errors
- ✗Asking it to “make it look nice” without rules. Without a loaded design system, AI produces generic visuals. Always reference rules (power-design) and/or a blueprint.
- ✗Copy instead of extracting. Reproducing the reference code creates a mess. Extract the language of the design, not the code.
- ✗Too much text on screen. Professional screens are scannable at a glance. Too much text breaks the 3-second read. Cut words.
- ✗Ignore whitespace and borders. Elements touching the edge and uneven spacing look amateurish. Leave breathing room and use consistent spacing.
- ✗Treat 3D/animation as the foundation. The biggest payoff comes from the design system (color, typography, proportion). 3D and loops are finishing touches—save them for last.
✅ Module summary
Completion checklist
- ☐ I understood that design has become code and why encoding rules improves AI.
- ☐ I loaded a set of design rules (power-design) before building.
- ☐ I extracted a blueprint from a reference using the design-language-skill (without copying code).
- ☐ I built a screen you can scan in ~3 seconds, with white space and respected borders.
- ☐ I added an image that fits the brand (good contrast and style).
- ☐ I consolidated a reusable design system (tokens, palette, typography, components).
- ☐ I generated a second screen by reusing the design system and maintaining consistency.
Next track:
Track 3 — Operate & Earn: 3.1 — Always-on personal agent. You finish Track 2 knowing how to build with quality; now it’s time to operate and monetize.