Your AI-built site is flat. Unflat it.
One CSS block that gives a single-tone page a ground, one light source and a few mounted surfaces, derived from the site's own colors. No markup changes. Delete the block to revert.
npx skills add merturl4576/unflatThen tell your agent: "This page looks flat. Use the unflat skill." Live gallery with draggable before/after sliders →
AI-generated pages put everything on one plane. One background color, sections stacked on it, cards floating with nothing under them. No ground, no light, no material. The page reads as a mockup.
It is an Agent Skill for Claude Code, Cursor, Codex and other coding agents. The agent audits the page, extracts your tokens, picks a material from your site's world, decides which sections are mounted and which rest on the ground, and appends one block to your global stylesheet. Six moves:
- Ground and lift. The page background moves 1–3% lightness down and the sections lift 2–3% up — a separation of about 4–6% (never more than 6%). On dark themes the ground is tinted toward your accent when their hues differ.
- Light. One fixed layer: a directional light and a vignette. Everything agrees on where the light comes from.
- Texture. Inline SVG grain tinted to your palette, 3–6% opacity. No image files.
- Rhythm. Not every section. The hero, strips and sections with their own artwork stay on the ground; the sections a visitor reads alternate with them as surfaces, a third to a half of the page. Every section boxed is not depth.
- Surfaces. The mounted sections: inset, lit top edge, deep shadow, a hairline of light, breathing room against the ground. A store, article or product page is one surface, the page plate.
- Alignment. Content stays on your grid; header and footer stay on the ground.
npx skills add merturl4576/unflatClaude Code, manual:
git clone https://github.com/merturl4576/unflat
cp -r unflat/skills/unflat ~/.claude/skills/unflat # or <project>/.claude/skills/unflatAny agent that reads SKILL.md folders works the same way.
Say one of these to your agent:
- "This landing page looks flat. Use the unflat skill."
- "Unflat
app/globals.css. Keep the header as it is." - "Add depth to this site without changing the HTML."
The agent replies with an audit, a token table, the material it picked and why, which sections it mounted and which it left on the ground, the values it derived, and a seven-line report with the revert instruction.
| Material | Theme | Picks itself for | Physics |
|---|---|---|---|
| plate | dark | workshops, industrial, craft, hardware, gaming | warm top-left light, lit edge, deep shadow, grain |
| paper | light | editorial, blogs, docs, portfolios | sheets on a darker desk, soft tinted shadow |
| glass | dark, cool | SaaS, AI, developer tools | soft accent field, semi-transparent panels, inner highlight |
| slate | any, neutral | enterprise, legal, B2B, government | cold light, planes close together, hairlines, no glow |
| backlit | dark, saturated | brands, music, events, streetwear | lit from behind by the accent, glowing edges |
Neutral fallbacks: plate for dark, paper for light. Glass is never a default.
Full-page tops at 1440 px: the flat page on the left, the same page with the block on the right. Nothing else changed. Open the gallery to drag the seam yourself.
Solder, terminal agent → plate
Ash & Iron, forge workshop → plate
Four more: dark workshop, light editorial, dark SaaS, backlit brand
Ferro & Grain, dark workshop → plate
Margin, light editorial → paper
Cartograph, dark SaaS → glass
HALOGEN, backlit brand → backlit
Every after.html in examples/ is before.html plus the block and nothing else. node scripts/check-examples.mjs proves it. The after pages were produced by the skill itself, not by hand.
- Surfaces stay within 3% lightness of your section background, so text contrast does not change.
- The hero, strips and artwork sections stay on the ground; a third to a half of the sections are mounted, never all of them.
- Header, footer, fixed and sticky elements are never touched.
- No motion, no
filter, nobackdrop-filterby default. - One fixed pseudo-element, one SVG data URI. No requests, no assets.
@media printstrips ground, texture and shadows.- Everything sits between
/* unflat: start */and/* unflat: end */. Delete it and the site is exactly what it was.
Does it work with Tailwind? Yes. The block is plain unlayered CSS appended after the Tailwind import, so it wins over layered utilities. Class names are never used; sections are targeted by structure and :has().
Why are some sections still on the plain background? That is the point. A surface reads as a surface only with ground next to it, so the hero, strips and sections with their own artwork stay on the ground and the sections you read are mounted between them. Ask the agent to move a section either way; the alternation is the thing to keep.
Does it change my HTML? No. If a page's structure truly cannot express the choice, the skill may add a data-unflat attribute and will say so in its report.
Light themes? Yes. Paper and light slate use ink-tinted shadows, slightly lighter sheets and a soft white edge instead of a lit metal edge.
Dashboards? No. unflat is for marketing and content pages. The skill stops and says so on app UI.
Performance? One position: fixed pseudo-element with gradients and an inline SVG. Nothing runs on scroll.
It picked the wrong material. Tell the agent which one you want; the decision table in skills/unflat/references/materials.md is a default, not a rule.
Sites built by an agent tend to share one tell: every section sits on the same solid color. Nothing is in front of or behind anything, so the page reads as unfinished even when the layout is right. More components do not fix that. A ground, one light source and surfaces mounted on that ground do, and all three can be derived from the palette the site already has. unflat is that fix as a single appended CSS block.
New materials are welcome. A material is a table of --unflat-* values, a domain list for the decision table and an override snippet; see the end of skills/unflat/references/materials.md. Add a demo pair under examples/ and run node scripts/check-examples.mjs.
If unflat made a page of yours look built, a star helps the next person find it.
MIT.
unflat, tek ton bir zemine oturmuş web sitelerine zemin, tek bir ışık kaynağı ve monte yüzeyler kazandıran bir Agent Skill'dir. Renkler sitenin kendi token'larından türetilir, HTML'e dokunulmaz, tek bir CSS bloğu eklenir; bloğu silince site eski haline döner. Kurulum: npx skills add merturl4576/unflat. Beş malzeme: plate, paper, glass, slate, backlit.