# Using DESIGN.md files is an insane upgrade for web designers.
**作者**: Viktor Oddy
**日期**: 2026-04-23T18:12:28.000Z
**来源**: [https://x.com/viktoroddy/status/2048713949357478178](https://x.com/viktoroddy/status/2048713949357478178)
---

# DESIGN.md files are Insane upgrade
Here's the workflow that changed how I design websites.
You write a hero prompt. It looks great. You go to build a pricing page — and the aesthetic falls apart. Different spacing, different vibe, different everything. You spend the next hour re-explaining your style to the AI for every new section.
The fix is a single file: DESIGN.md.
Drop it into Claude Design. Now every page you generate is on-brand. Same type, same colors, same animations, same composition rules. No re-explaining.
Let me show you exactly how it works.
## Step 1: Start with a hero prompt that already works
Here's a hero I built recently — fullscreen video, floating glass nav, character-by-character heading animation, glass tagline pill at the bottom. React + TypeScript + Tailwind, no external libraries.
> **Viktor Oddy@viktoroddy**: [原文链接](https://x.com/viktoroddy/status/2047378082676560207)
>
> Claude Opus 4.7 + GPT Image 2 is scary good at creating animated websites.
> Prompt
>
> 
The signature element is one CSS class: .liquid-glass. It uses backdrop-filter, background-blend-mode: luminosity, and a gradient pseudo-border drawn via mask compositing. That class is the magic — everything else composes around it.
> .liquid-glass {
> background: rgba(0, 0, 0, 0.4);
> background-blend-mode: luminosity;
> backdrop-filter: blur(4px);
> -webkit-backdrop-filter: blur(4px);
> box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
> position: relative;
> overflow: hidden;
> }
> .liquid-glass::before {
> content: '';
> position: absolute;
> inset: 0;
> border-radius: inherit;
> padding: 1.4px;
> background: linear-gradient(180deg,
> rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%,
> rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
> rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
> -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
> -webkit-mask-composite: xor;
> mask-composite: exclude;
> pointer-events: none;
> }
That's it. Apply .liquid-glass to any container and it floats over the background like frosted glass.
## Step 2: Extract the system
The hero prompt was specific to one section. To make it reusable, I pulled out the rules behind it:
— Font: Helvetica Neue, weight 400, antialiased
— Palette: black background, white text, text-gray-300 for muted, border-white/20for glass borders
— Type scale: text-4xl md:text-5xl lg:text-6xl xl:text-7xl for display, with letterSpacing: -0.04em
— Buttons: primary is solid white on black, secondary is liquid-glass with border-white/20
— Animation timeline: heading at 200ms (30ms per char), subhead at 800ms, CTAs at 1200ms, tagline at 1400ms — all 1000ms fades
— Layout padding: px-6 md:px-12 lg:px-16 everywhere
— Composition rules: every floating element is liquid glass, solid white reserved for CTAs only, borders are always white/20 or the gradient pseudo-border
Once those rules exist as a file, I can ask for any page in this aesthetic and it stays on-system.
## Step 3: Drop it into Claude Design
Open claude.ai/design, attach the DESIGN.md as context, then prompt naturally:
— "build me a pricing page"
— "add a testimonials section"
— "make a 404"
— "design the dashboard"
Every output uses the liquid-glass surface, the same Helvetica + tight tracking, the same staggered animation timeline, the same px-6 md:px-12 lg:px-16 padding rhythm.
You stop writing prompts about style. You only write prompts about content.

## Step 4: Reuse the components
The MD also defines two reusable React components:
AnimatedHeading — splits text into characters, animates each <span> from opacity: 0, translateX(-18px) to opacity: 1, translateX(0). Per-character delay = lineIndex * line.length * charDelay + charIndex * charDelay. Spaces preserved with \u00A0.
FadeIn — wraps children, toggles opacity 0 → 1 after a delay, configurable duration.
Once Claude Design knows about these, every section that needs entrance animation just uses them. No re-specifying.
## Why this scales
A hero prompt = one section, one shot.
A DESIGN.md = an entire site, infinite shots.
You can:
— Remix — take typography from one MD, palette from another, animations from a third
— Version — update one rule, regenerate every page
— Share — hand a teammate the file, they're on-brand on day one
— Port — feed it to Claude Code, Cursor, or Lovable. The file is portable.
The Liquid Glass Dark MD I built has every code block, every CSS rule, every Tailwind class string from the hero — but generalized so it applies to any page, not just heroes.
If you want more prompts, MD files, and motion website templates like this one, I put everything on motionsites.ai — 100+ ready-to-use AI prompts and websites you can ship today.

Stop designing one section at a time. Start shipping whole sites.
## 相关链接
- [Viktor Oddy](https://x.com/viktoroddy)
- [@viktoroddy](https://x.com/viktoroddy)
- [22K](https://x.com/viktoroddy/status/2048713949357478178/analytics)
- [Apr 24](https://x.com/viktoroddy/status/2047378082676560207)
- [94K](https://x.com/viktoroddy/status/2047378082676560207/analytics)
- [#fff](https://x.com/search?q=%23fff&src=hashtag_click)
- [#fff](https://x.com/search?q=%23fff&src=hashtag_click)
- [claude.ai/design](https://claude.ai/design)
- [motionsites.ai](http://motionsites.ai/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [6:40 PM · Apr 27, 2026](https://x.com/viktoroddy/status/2048713949357478178)
- [22.3K Views](https://x.com/viktoroddy/status/2048713949357478178/analytics)
- [View quotes](https://x.com/viktoroddy/status/2048713949357478178/quotes)
---
*导出时间: 2026/4/28 17:43:22*