A collection of guideline prompts created to refine the often awkward design traits of generative AI by applying a modern design system, intended for use in Claude, Codex or other vibe coding tools
SaferSkills independently audited design-system-is-all-you-need (Agent Skill) and scored it 66/100 (yellow). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 8 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 8 flagged
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
The text {match} tells the agent to skip the normal "ask the user first" gate. Used adversarially it removes the human-in-the-loop check before destructive or sensitive actions, turning a normally-gated agent into a fire-and-forget executor.
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Activate this skill whenever the user requests UI/UX design work, frontend implementation, component creation, or any visual design task — including but not limited to:
You MUST follow the three-step flow below IN ORDER before producing any design or code output. Do NOT skip any step. Do NOT assume defaults. Do NOT proceed until each step is confirmed by the user.
If the user has NOT already specified which design style to use, you MUST stop and ask them to choose from the available guidelines:
Available Design Guidelines:
| # | Style | File | Description |
|---|---|---|---|
| 1 | Neumorphism (Soft UI) | references/neumorphism.md | Extruded/pressed soft surfaces with dual-directional shadows on a matte background |
| 2 | Glassmorphism (Frosted Glass UI) | references/glassmorphism.md | Translucent frosted glass panels layered over rich, vibrant backgrounds |
| 3 | Brutalism (Raw UI) | references/brutalism.md | Exposed structural elements with thick borders, hard-edge shadows, and aggressive typography on flat surfaces |
| 4 | Skeuomorphism (Realistic UI) | references/skeuomorphism.md | Tangible, material-driven surfaces with realistic gradients, textures, highlights, and physically weighted interactions |
| 5 | Material Design (Material You / M3) | references/material-design.md | Layered adaptive surfaces with tonal color palettes, systematic elevation, and physically informed motion |
| 6 | Pnalism (Two-Tone Minimal, Pnal's UI) | references/pnalism.md | Disciplined two-tone color system with zero shadows, relying solely on typography, whitespace, and precise accent placement |
| 7 | Neon (Glow UI) | references/neon.md | Dark-first luminous interfaces with multi-layer colored glow effects simulating electric neon tube signage |
| 8 | Heritage (Warm Editorial UI) | references/heritage.md | Warm earthy tonal surfaces with serif/script typography, organic image shapes, and editorial asymmetric layouts |
Present these options clearly and wait for the user's choice. If the user describes a style that clearly maps to one of the above (e.g., "frosted glass look", "soft 3D style"), you may infer the selection but confirm it before proceeding.
If the user wants a style NOT listed above, inform them that only the styles above are currently available as structured guidelines, and ask if they'd like to proceed with one of them or provide their own custom guideline.
Once the user has chosen a guideline, immediately read the corresponding file from the references/ folder:
references/neumorphism.mdreferences/glassmorphism.mdreferences/brutalism.mdreferences/skeuomorphism.mdreferences/meterial-design.mdreferences/pnalism.mdreferences/neon.mdreferences/heritage.mdInternalize ALL rules from the selected guideline — both common rules and component-specific guides. These rules govern every design decision from this point forward.
Each guideline requires exactly two user inputs. After reading the guideline, check whether the user has already provided these values. If ANY value is missing, you MUST ask for it before producing any output.
For Neumorphism:
--theme-color): A hex color code (e.g., #6C63FF)--shadow-intensity): subtle | medium | strongFor Glassmorphism:
--theme-color): A hex color code (e.g., #6C63FF)--blur-intensity): light | medium | heavyFor Brutalism:
--theme-color): A hex color code (e.g., #FF5733)--rawness): moderate | raw | extremeFor Skeuomorphism:
--theme-color): A hex color code (e.g., #3A7BD5)--realism): refined | classic | richFor Material Design:
--theme-color): A hex color code (e.g., #6750A4)--elevation-style): flat | tonal | shadowFor Pnalism:
--theme-color): A hex color code (e.g., #4A7DFF)--density): compact | comfortable | spaciousFor Neon:
--theme-color): A hex color code (e.g., #FF00FF)--glow-intensity): dim | standard | vividFor Heritage:
--theme-color): A hex color code (e.g., #C4A882)--warmth): subtle | classic | richWhen asking, provide brief descriptions and examples so the user can make an informed choice. Once both values are confirmed, derive all remaining tokens according to the Auto-Derived Token System defined in the guideline.
Once all three steps are done, you have:
From this point, apply the guideline strictly to ALL design and code output. Specifically:
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.