An agent skill for naive design — the warm, hand-drawn, intentionally-imperfect aesthetic that became the megatrend of 2026. Childlike doodles, crayon/marker/risograph texture, soft mascots, lowercase friendly type, generous negative space. "In 2026, messy is the new premium."
It is the disciplined complement to design-engineering. Where that skill says most polish is deletion, this one says some imperfection is addition — but only when it's art-directed, not careless. The whole skill rests on one rule: naive ≠ broken.
Encodes Amir Mušić's thread "The megatrend of 2026: Naive design" and extends the method from image-generation into real HTML/CSS/SVG.
Pair it with its companion, design-engineering — this skill names exactly which of its nodes to load per decision (marketing-vs-product-ui, visual-imperfection, color-monochromatic, the motion cluster…). Install both:
npx plugins add AgentsORG/design-engineering
npx skills add AgentsORG/design-engineeringAll built in one cohesive "lulu" system with naive-design + design-engineering's craft rules (shadows-whisper, typography-humanity, prefers-reduced-motion-gated motion, a fixed jitter set on a real grid). Each is a different surface where naive belongs:
1 · Mini brand board — examples/showcase.html. Hero wordmark, a limited palette of rough swatches, dot-face mascots on rotated sticker cards.
2 · Marketing landing hero — examples/landing.html. The classic home for naive: warm and playful, converting because everything else in the feed is cold.
3 · In-app empty state — examples/emptystate.html. The one place naive belongs inside a product. Note the discipline: the app chrome stays clean and straight; the warmth is concentrated in the illustration, not smeared across the UI.
4 · Square social campaign tile — examples/social.html. Poster energy, a limited palette, doodles on a centred grid.
The discipline throughout: a real grid, generous negative space, a limited palette, wobble applied to decorative marks only (underlines, borders, doodles) — never to structure or body text. That line between intentional and broken is the whole point.
design-engineering has exactly one node on imperfection — visual-imperfection — and it treats it cautiously, as a marketing-only accent, because that skill's stance is restraint. Naive design is the deliberate inverse: imperfection as the entire visual system. This skill makes that inversion safe by carrying the same discipline design-engineering demands — the hard line between "intentionally naive" and "just broken," and the hard boundary that keeps doodles off your dashboards.
It's self-contained (works without design-engineering installed) but better paired — it names the exact design-engineering nodes to load alongside each decision.
| File | What it is |
|---|---|
skills/naive-design/SKILL.md |
The skill. One file: the thesis, the one rule (intentional, not broken), when-to-use + the hard boundary, the aesthetic vocabulary, building it in code (paper/riso grain, wobble filters, rough.js, sticker shadows, type pairing, gated motion), the naive-design tells, the prompt method, and a pairing map to design-engineering. |
DESIGN.md |
A reference naive-aesthetic token file in Google Labs design.md format — warm grounds, crayon/marker accents, the type pairing, soft radii, generous spacing. Consumable by design-engineering's using-design-md flow. |
prompts/prompt-library.md |
The five thread prompts cleaned, deduped, and parameterized (brand piece · fashion cover · business cards · poster · full 16:9 brand-kit board), plus the reusable 9-part prompt anatomy. |
examples/ |
Four rendered demos (showcase, landing, emptystate, social) + the screenshots above. |
spec/design-md-spec.md |
Offline snapshot of the design.md format. |
The fastest path — one command, any agent:
npx skills add AgentsORG/naive-designThis uses the skills.sh CLI to install into your detected agent (Claude Code, Cursor, Windsurf, Codex, Gemini, Cline, Aider, and others). It prompts for scope (project vs. global) and method (symlink vs. copy).
Browse it on skills.sh/AgentsORG/naive-design.
npx plugins add AgentsORG/naive-designClaude Code — marketplace:
/plugin marketplace add AgentsORG/naive-design
/plugin install naive-design
# or test locally from this repo root
claude --plugin-dir .Codex:
codex plugin marketplace add AgentsORG/naive-design --sparse .codex-plugin --sparse skillsCursor — Settings → Plugins → Load unpacked → point at this repo root.
Drop this block into your agent's instructions / AGENTS.md / .cursorrules / system prompt:
You have access to the naive-design skill — the warm, intentionally-imperfect
"naive design" aesthetic, and the disciplined complement to design-engineering.
Load it when the user wants a hand-drawn / childlike / doodle / crayon / marker /
risograph look for branding, marketing, posters, packaging, onboarding, empty or
404 states; when generating naive-style brand assets with an image model; or when
judging whether messy-premium imperfection fits a surface.
- Repo: https://github.com/AgentsORG/naive-design
- Skill: skills/naive-design/SKILL.md (single file, graph: false)
- Tokens: DESIGN.md (Google Labs design.md format)
- Prompts: prompts/prompt-library.md
The one rule: intentional, not broken. Keep a real grid, generous negative space,
and a limited palette under the play. Naive lives on the brand surface; product UI
(tables, forms, dashboards, financial/medical) stays disciplined.
Pair with design-engineering when present: load marketing-vs-product-ui and
data-is-content to decide WHERE naive belongs; visual-imperfection (this is its
deliberate inverse); color-monochromatic for the limited palette; typography-
humanity for the type pairing; the motion cluster (easing-curves, never-scale-
from-zero, prefers-reduced-motion) for any animation; ai-default-tells and
content-authenticity so "cute" never smuggles slop back in.
- design-engineering — install both; this skill names which of its nodes to load per decision.
npx plugins add AgentsORG/design-engineering(ornpx skills add AgentsORG/design-engineering). - Google Labs design.md — the token format
DESIGN.mduses.npx -y -p "@google/design.md" designmd lint DESIGN.md. - Tools the skill recommends — rough.js, Open Doodles, DiceBear, Bricolage Grotesque, Shantell Sans.
Unlike design-engineering (a hub-and-spoke graph of ~60 atomic nodes), naive-design is deliberately a single-file pack — all the knowledge lives in one SKILL.md (graph: false, ~210 lines), with DESIGN.md and prompts/ as companion artifacts in their own formats. One aesthetic, one tight file: cheap to load, easy to fork. If it ever outgrows ~500 lines, the right move is to promote it to a graph mirroring design-engineering — see AGENTS.md.
naive-design/
├── README.md
├── AGENTS.md ← repo-level agent guidance (the "what / how")
├── SOUL.md ← identity layer (the "who / why")
├── CONTRIBUTING.md CHANGELOG.md LICENSE
├── DESIGN.md ← naive-aesthetic tokens (Google Labs design.md)
├── .markdownlint.jsonc .gitignore
├── .github/
│ ├── workflows/lint.yml ← markdownlint + frontmatter + structure + manifest-parity
│ └── PULL_REQUEST_TEMPLATE.md
├── .claude-plugin/ (plugin.json + marketplace.json)
├── .codex-plugin/ (plugin.json with interface block)
├── .cursor-plugin/ (plugin.json)
├── .plugin/ (vendor-neutral plugin.json)
├── spec/
│ └── design-md-spec.md ← offline design.md snapshot
├── prompts/
│ └── prompt-library.md ← the five generation prompts, parameterized
├── examples/
│ ├── showcase.html landing.html emptystate.html social.html
│ └── *.png ← rendered screenshots (shown in the README)
└── skills/naive-design/
└── SKILL.md ← the single-file skill
Ask your agent things like:
- "Give our landing page a naive-design treatment — warm, hand-drawn, but keep it well-composed."
- "Build a naive-style hero in HTML/CSS with paper grain and a wobbled underline." (see
examples/showcase.html.) - "Is naive design right for this settings screen?" (the skill will say no, and why.)
- "Write me a prompt to generate a naive brand-kit board for [BRAND]."
- "Lint the DESIGN.md and apply its tokens to this component."
SKILL.md is a starter, not scripture. Swap the fonts, retune the palette in DESIGN.md, add your own marks. Append a one-liner to the Gotchas section every time the agent gets a naive detail wrong — that failure log is the highest-signal part of the skill over time.
Method, thesis, and original prompts: Amir Mušić (@AmirMushich), 2026 naive-design thread. Craft discipline and the pairing model: design-engineering. Token format: Google Labs Code. Authored by HKTITAN (harshitkhemani@gmail.com).
- design-engineering — the skill this one complements
- design.md — design-token format for coding agents
- skills.sh — the CLI and registry
- Amir Mušić's thread — the source
MIT. See LICENSE.