AgentsORG/naive-design

AgentsORG profile

Latest recorded source activity: May 29, 2026 at 07:17

SkillsMP catalog refreshed: October 26, 2026 at 11:37

skills collected: 1

GitHub stars: 6
GitHub forks: 0

Repository README

Repository README source: README.md

Read the source README

Expand full README

# naive-design [![skills.sh](https://skills.sh/b/AgentsORG/naive-design)](https://skills.sh/AgentsORG/naive-design) [![CI](https://github.com/AgentsORG/naive-design/actions/workflows/lint.yml/badge.svg)](https://github.com/AgentsORG/naive-design/actions/workflows/lint.yml) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) 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](https://github.com/AgentsORG/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](https://x.com/AmirMushich) thread ["The megatrend of 2026: Naive design"](https://x.com/AmirMushich/status/2060083688730493348) and extends the method from image-generation into real HTML/CSS/SVG. **Pair it with its companion, [design-engineering](https://github.com/AgentsORG/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: ```bash npx plugins add AgentsORG/design-engineering npx skills add AgentsORG/design-engineering ``` ## Made with the skill All 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`](examples/showcase.html). Hero wordmark, a limited palette of rough swatches, dot-face mascots on rotated sticker cards. ![naive-design — the lulu mini brand board](examples/showcase-full.png) **2 · Marketing landing hero** — [`examples/landing.html`](examples/landing.html). The classic home for naive: warm and playful, converting *because* everything else in the feed is cold. ![naive-design — a lulu landing hero](examples/landing.png) **3 · In-app empty state** — [`examples/emptystate.html`](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. ![naive-design — an empty state inside a disciplined app](examples/emptystate.png) **4 · Square social campaign tile** — [`examples/social.html`](examples/social.html). Poster energy, a limited palette, doodles on a centred grid. ![naive-design — a 1:1 social campaign tile](examples/social.png) > 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. ## Why it complements design-engineering 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. ## What's included | File | What it is | |---|---| | [`skills/naive-design/SKILL.md`](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`](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`](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/`](examples/) | Four rendered demos (`showcase`, `landing`, `emptystate`, `social`) + the screenshots above. | | [`spec/design-md-spec.md`](spec/design-md-spec.md) | Offline snapshot of the design.md format. | ## Install The fastest path — one command, any agent: ```bash npx skills add AgentsORG/naive-design ``` This uses the [skills.sh](https://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](https://skills.sh/AgentsORG/naive-design)**. ### Plugin bundle (Claude Code + Cursor + Codex) ```bash npx plugins add AgentsORG/naive-design ``` **Claude Code** — marketplace: ```bash /plugin marketplace add AgentsORG/naive-design /plugin install naive-design # or test locally from this repo root claude --plugin-dir . ``` **Codex**: ```bash codex plugin marketplace add AgentsORG/naive-design --sparse .codex-plugin --sparse skills ``` **Cursor** — Settings → Plugins → Load unpacked → point at this repo root. ## Paste this into your coding agent Drop this block into your agent's instructions / `AGENTS.md` / `.cursorrules` / system prompt: ```text 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. ``` ## Recommended companions - **[design-engineering](https://github.com/AgentsORG/design-engineering)** — install both; this skill names which of its nodes to load per decision. `npx plugins add AgentsORG/design-engineering` (or `npx skills add AgentsORG/design-engineering`). - **[Google Labs design.md](https://github.com/google-labs-code/design.md)** — the token format `DESIGN.md` uses. `npx -y -p "@google/design.md" designmd lint DESIGN.md`. - **Tools the skill recommends** — [rough.js](https://roughjs.com), [Open Doodles](https://www.opendoodles.com), [DiceBear](https://www.dicebear.com), [Bricolage Grotesque](https://fonts.google.com/specimen/Bricolage+Grotesque), [Shantell Sans](https://fonts.google.com/specimen/Shantell+Sans). ## Structure: a single-file pack, not a graph 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](AGENTS.md). ## Repository layout ```text 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 ``` ## Use it 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." ## Make it yours `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. ## Credit Method, thesis, and original prompts: **Amir Mušić** ([@AmirMushich](https://x.com/AmirMushich)), [2026 naive-design thread](https://x.com/AmirMushich/status/2060083688730493348). Craft discipline and the pairing model: **[design-engineering](https://github.com/AgentsORG/design-engineering)**. Token format: **[Google Labs Code](https://github.com/google-labs-code/design.md)**. Authored by **HKTITAN** (`harshitkhemani@gmail.com`). ## See also - [design-engineering](https://github.com/AgentsORG/design-engineering) — the skill this one complements - [design.md](https://github.com/google-labs-code/design.md) — design-token format for coding agents - [skills.sh](https://skills.sh) — the CLI and registry - [Amir Mušić's thread](https://x.com/AmirMushich/status/2060083688730493348) — the source ## License MIT. See [LICENSE](LICENSE).

Loading the repository README…

Skills in this repository

Graphic Designers

1 occupation categories · 100% classified

skill

occupation

description

updated

naive-design

Graphic Designers

Load when building a warm, hand-drawn 'naive design' aesthetic — childlike doodles, crayon/marker/risograph texture, lowercase friendly type, soft mascots, intentional imperfection — for branding, posters, packaging, merch, social, landing pages, onboarding,…

2026-05-29

Showing 1 of 1 collected skills.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/AgentsORG/naive-design.