Web Design

Web Design

You apply a brand's defined visual system to a live website and ship the code — designing and building at the same time, in custom code. This is the first Application skill: the color roles, type rules, motif, and signature element from creative-direction become a real conversion surface, built around real copy.

Read design-principles first. This skill is where its rules meet a browser: hierarchy is the job, restraint protects the message, contrast-not-competition, "state why or the default stands." Most of what separates a designed site from an assembled one is here.

> Position in the sequence: after creative-direction (the system) and logo-design (the mark), the first of the Application skills. It consumes the identity; it does not define one. Custom code is the medium — this skill builds bespoke HTML/CSS (and the project's framework if one exists), not Webflow or Framer.

Front-Door Diagnosis — Settled Brand, or Rework?

Before anything, diagnose where the brand is. Open .agents/design.md, .agents/brand.md, and .agents/product-marketing.md — by this stage all three should exist. Then ask one question:

> Are we applying a settled brand, or reworking one from scratch?

Four routes, in the plain language a client uses:

• Refine the existing elements ("we like our brand, the site's just weak") → Optimization. Proceed — this is the skill's home.
• Light creative direction ("keep the name and logo; new type, color, graphics") → light Evolution. Proceed only if design.md already records those new choices; if it doesn't, the deltas are undefined → route back to creative-direction for the light pass first.
• Full rebrand ("new everything") → Revolution → stop and route back to creative-direction. Do not design a site on an undefined system.
• Heavy Evolution (the core system is genuinely changing) → route back too.

Routing back holds even if the user arrives with a logo already — a mark without the system around it isn't enough to build a coherent site; push them back. The rule of thumb: route back whenever the visual system is being defined or changed; proceed only when it's settled.

**If .agents/design.md is missing, that is the "go back" signal — there's no system to apply yet. Route to creative-direction. If .agents/product-marketing.md is missing or the page has no copy, route to the marketing library's copywriting / website-copy first: the site is built around the copy, never the reverse.**

Copy First — the System Is the Stage, Not the Show

The single most important input is the words. Read the copy in .agents/product-marketing.md (audience, voice, positioning, and the page copy itself). The designer's job is to take what's being said and give it proper emphasis, joy, and delight — not to build a template and pour copy into the gaps. Wireframe-first thinking is the fastest tell of an assembled page. If the copy isn't written, get it written first.

Size follows the content, not a template. The headline scale is dictated by what the copy actually is — a hook line that's meant to be completed by a second line (a typed continuation, a rotating phrase) means a smaller headline, not a giant one-liner sitting alone. A hero with a lone hook and no follow-through reads as unfinished. Design the content you have; don't force it into a fixed hero shell.

The visual system serves the message. Design serves the message. The site is the stage; the copy is the show.

When You Reference an Existing Site, Be Faithful to It

Redesigning a live site, or building "like" a reference? Then look at what's actually happening on that site — don't approximate it from memory. Full method in [references/faithful-replication.md](references/faithful-replication.md).

• Port every section. Inventory the source top to bottom and carry each section over — right copy, right order. A "redesign" that silently drops the terminal-signup, the capabilities section, or the orbital product visual isn't a redesign, it's a different site.
• Match the action the site is driving. Read what it's encouraging the visitor to do and reproduce that mechanism, not just the words. If the hero invites you to enter a URL and get a free plan, the redesign's hero needs that URL field and that button — the primary action is the point of the page.
• Pull the real assets. Integration/partner logos are real and available (a Relume or brand-asset library, the source's own markup, a brand-SVG source like simple-icons). Use the real logos — never substitute an icon-plus-text stand-in, and never ship a low-contrast logo strip.
• Tell the visual's real story. A product illustration has to communicate what the product does — e.g., an orbital that shows work (writing, optimizing, launching, researching) looping around the agent, not decoration that misses the point.

You are not producing a comp for someone else to implement. You design by building — the design decisions are the code. Output real, production front-end:

• Match the project's stack if one exists (Next.js / Tailwind / shadcn per the repo's conventions); otherwise ship clean, self-contained HTML/CSS. Framework-agnostic by default.
• No Webflow, no Framer. This skill exists because the work has moved to custom code — bespoke markup you can push as far as the craft demands, with none of the builder-tool ceilings.
• Spacing in rem, fluid with clamp() — never fixed px in production. Horizontal padding percentage-based; section padding fluid. See [references/craft-details.md](references/craft-details.md).
• Cross-reference the marketing library's website-build-* skills only if the user explicitly wants a platform build (Webflow/Framer) — that's the exception this skill was built to move away from.

Apply the System

Pull the system from .agents/design.md — don't re-derive it, don't invent alongside it:

1. Place the locked logo; never rebuild it. Take the mark from the canonical files the logo-design skill wrote — .agents/assets/logo/logo-lockup.svg (nav, footer), logo-icon.svg (favicon, tight spaces), the -inverse / mono variants on dark or single-colour grounds. It is one locked element: don't set the wordmark yourself, don't pick your own gap, don't recolour it to match an accent, don't crop it or drop it in a box, don't scale it below its minimum size, and respect its clear space. If the surface needs a variant that isn't in the folder, route back to logo-design — don't improvise one in CSS.
2. Color by role. Background, text (primary/secondary), action/CTA, support. Five stops per color, not ten. Use the tokens as defined.
3. **The CTA color is one deliberate, always choice — and it is not a text or graphic color.** Pick a single color that reads as progression forward (a green or blue, heuristically) and use it for the primary action everywhere. It must be chromatically distinct from the color carrying your headlines, icons, and decoration — otherwise the button doesn't pop, it blends. Use it only on actual CTAs — never a headline, never a decorative accent. A separate brand accent carries repeated emphasis (and even that with restraint); if the forward color starts showing up on labels and graphics, it stops meaning "act." Never style a non-interactive element like a button, either — a fake CTA erodes the real one. And give the CTA a differentiated shape — a pill or rounded form, not the same squared rectangle as every card — so the action reads at a glance.
4. Type by role, for contrast not competition. Display, heading, body — each with a clear job. Don't default to bold; body is regular/book weight, heavier weights reserved for moments that earn it. Heading leading 1.1–1.3, body 1.5–1.6. Secondary text is a softer shade/opacity than headings — hierarchy even within one face. Change body copy to the secondary text color across the whole page in one systematic pass, not section by section (see [references/craft-details.md](references/craft-details.md) → work systematically).
5. The motif carries the brand — but restrained where the message must win. Deploy the signature element as texture, pattern, or a recurring detail (this is where distinctiveness must survive application — see design-principles). In the hero, calm it down: a busy motif behind the headline and primary action is distraction, not identity. Let the message and the CTA lead; thread the motif more assertively in later sections.
6. Eyebrows sparingly. A mono/uppercase kicker over every section is clutter — it flattens hierarchy instead of building it. Use an eyebrow only where a section genuinely needs the label; most sections lead with the headline.
7. Depth, light, and surface transitions per the system's intent — multi-layer shadow stacks (not flat shadow-md), gradual background shifts and earned dark/light flips over hard-edged banded sections.

Build Section by Section — Give Each Thing a Lane

Work the page as a sequence, never each section in isolation. Full per-section playbook in [references/section-patterns.md](references/section-patterns.md).

• Name each section's one job, then give the element that carries it its own lane and scale it to that rank. A positioning line gets a stage; a trust strip gets a full-width lane, not a corner of the hero; a hero object gets a spotlight. Supporting detail recedes.
• **Rhythm is a vocabulary of section types, not a column count.** Rotate through genuinely different section types — each a different medium — and never play the same one twice: asymmetric hero, a full-bleed human/video moment, an illustration/contrast beat, an oversized aphorism, a pinned scroll-telling sequence (a heading pins while statements cycle beneath giant ghost numerals — choreograph it with motion-design), colored cards, a spotlit object reveal, a carousel. Change the medium (UI → video → illustration → photo → cards), not just the layout. Then unify the variety with one through-line texture + strict color discipline, use scale contrast (ghost numerals vs. tiny copy), and leave quiet between the loud beats. The failure mode: one instrument played the whole song — the same card/panel idiom repeated with only the column count changing. Full vocabulary in [references/section-patterns.md](references/section-patterns.md); study conversionfactory.co for how it's paced.
• Balance every text section with a visual. A text-only section that should carry an image reads as unfinished. Show the product in layered, overlapping mockups — a device, a card, a sticker at a slight rotation, real depth — the way strong marketing sites do, rather than a flat screenshot or nothing.
• Consolidate. Three substantial sections beat five thin ones. Whitespace is emphasis, not just breathing room.
• CTAs, logos, and hover states are content, not decoration. Primary and secondary CTAs stay distinct in every state including hover. Partner/integration logos get one normalized trust lane — real logos, optical (not pixel) sizing, one color story, and enough contrast to actually read.

Motion — Carry the Brand's Motion Character, Then Hand Off

Motion is part of the system, not a garnish added at the end — and like color and type, its character is brand-derived. Read the motion character from .agents/design.md and the emotional target: a playful, eccentric brand earns springy, generous, frequent motion; a serious, premium brand earns subtle, controlled, sparing motion. "Slick" is not the universal goal — rendering a playful brand's motion tastefully minimal flattens it into a generic one. Never substitute a house default for the brand's own feel.

Then split the work by the job each animation is doing — this is the line between what you handle here and what motion-design handles:

• Functional / UI motion — build it here. Hover and focus states, press feedback, the CTA's states, disclosure and menu transitions, section reveals. This motion has a job: feedback, orientation, cause and effect. Keep it utilitarian regardless of how playful the brand is — fast, unobtrusive, out of the way.
• Expressive / storytelling motion — hand off to motion-design. Choreographed page-load sequences, the pinned scroll-telling beat, signature product-visual behavior, hero moments, and any content-specific idea whose purpose is the feeling. That's where brand latitude gets spent, and where the twelve principles pay off.

The floor you build to here

These are the motion-design rules that matter most on a marketing site — apply them inline; you don't need the full skill to get them right:

• A named easing set, and ease-out as the workhorse. Custom curves, not raw linear (the loudest amateur tell) and not one undifferentiated ease on everything. Entrances and exits both read better decelerating into rest.
• UI transitions under ~300ms. Hover/press in the 100–200ms range; anything slower has to earn the wait. Match duration to the mass of the thing moving — small fast, big slow.
• Press feedback. A subtle scale-down (~0.97) on :active so the interface feels like it's listening.
• Entrances overlap and stagger; they never queue. Grouped elements share timing and offset by small delays (~40–80ms) rather than each waiting for the last to finish. This one move is most of the distance between "fine" and "expensive."
• Animate transform and opacity only. Animating width/height/top/left/box-shadow triggers layout or paint and janks — and that jank reads as a cheap build.
• Reveals are hierarchical, not uniform. Fade-up on every element identically is a named slop trope ([references/web-slop.md](references/web-slop.md)) — the failure is the sameness, not the amount. Reveal what carries the message; leave the rest still.
• prefers-reduced-motion is non-negotiable. Ship a reduced path (opacity-only or instant) for every non-trivial animation, and kill ambient/parallax motion entirely under it.

Reach for GSAP when the motion gets real. CSS transitions and @keyframes are the right tool for hover, focus, press, and simple reveals — don't pull in a library for what the platform does natively. But for smooth, complex, choreographed motion, GSAP is the best option available and now entirely free (all plugins included, since Webflow took it over): ScrollTrigger for scroll-driven sequences and pinning (exactly the pinned scroll-telling beat above), SplitText for staggered word/line reveals, and Flip for shared-element/layout transitions. Its timelines make overlapping, staggered choreography far easier to control than hand-tuned CSS delays, and its interpolation is noticeably smoother on demanding sequences.

Full craft — the twelve principles, the technique toolkit, easing/duration tokens, and the motion-slop checklist — lives in motion-design. Reach for it whenever the site needs expressive motion rather than just a competent floor.

Tooling & References — Use What's Connected, Fall Back Gracefully

The build is faster and the rhythm richer when you lean on real tools — but never block on a missing one; degrade to the next option.

• Relume MCP (preferred accelerator, when connected) — generate the sitemap (top-level and parent/child pages), wireframe from its component library (which varies layouts and seeds rhythm), and a style guide whose base color auto-expands to 5-stop tints and sets the single always-CTA color — all of which ports into the build. Group pages by shared format (all solution pages one structure, varied content).
• frontend-design skill — when Relume isn't available, for distinctive, production-grade frontend.
• web-design-guidelines — the UX/UI + accessib

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: zstvns
• Source: zstvns/design-skills
• License: MIT

Install and usage instructions live in the source repository linked above.