Design Studio Skill
Brand tokens, page specs and scored critiques that stop AI-built UI looking generic.
GetKits 제작
차이를 직접 확인하세요
"Does this look AI-made?" answered with a score
사용 전
Our hero, built in v0: violet-to-blue gradient, centered H1 "Supercharge Your Workflow", subhead #94A3B8 on the gradient, two pill buttons, six emoji feature cards below. Does this look AI-made?
사용 후
Score: 15/35 Verdict: Rework Generic tells found: violet gradient, everything centered, card soup, emoji icons, hype copy. 1. Accessibility: subhead #94A3B8 on #7C3AED is 2.22:1. Fix: solid #FBFAF7 hero, subhead #5A635E (5.95:1). Priority 9 2. Hierarchy: two equal pill buttons. Fix: one bg-primary button, the other a text link. Priority 9 3. Color: drop the gradient; one flat primary, for actions only. Priority 6
Three-line brief in, brand tokens out
사용 전
Brand kit please. Lumen: invoicing and contracts for freelance photographers. Should feel editorial, warm, a bit premium. NOT the usual SaaS blue. We have a black wordmark. Next.js, Tailwind v4, shadcn.
사용 후
BRAND KIT: Lumen v1.0 (2026-10-02) Positioning: For freelance photographers who would rather shoot than chase invoices, Lumen is the invoicing app that makes getting paid look as considered as their work. Personality: editorial, not precious | warm, not rustic | premium, not cold Signature move: Instrument Serif headlines with a darkroom-red primary on warm paper. Contrast pairs | Foreground | Background | Light | Dark | Passes | | --foreground | --background | 17.02 | 16.16 | AAA | | --primary-foreground | --primary | 8.25 | 6.51 | AA | | --muted-foreground | --background | 5.38 | 6.81 | AA | | --muted-foreground | --muted | 4.93 | 5.75 | AA | | --input | --card | 3.54 | 3.65 | UI 3:1 | Type: Instrument Serif 400 for headlines 32 px and up. Geist 400 and 600 for UI. Geist Mono with tabular-nums for invoice numbers and totals. Shape: Sharp, --radius 6px. Spacing: 4 px scale, sections 64 / 96 px. :root { --background: #F7F4EE; --foreground: #141210; --card: #FFFFFF; --muted: #EFEAE1; --muted-foreground: #6B635A; --primary: #8C2F23; --primary-foreground: #FFFFFF; --border: #E3DCD0; --input: #8F877C; --ring: #8C2F23; --radius: 6px; --font-heading: "Instrument Serif", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; } .dark { --background: #141210; --foreground: #F2EEE7; --card: #1C1916; --muted: #26221E; --muted-foreground: #A39B90; --input: #7A7166; --primary: #E0786A; --primary-foreground: #1A0906; } @theme inline { --color-background: var(--background); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --font-display: var(--font-heading); --font-sans: var(--font-body); --radius-md: calc(var(--radius) - 2px); } Excerpt. The full kit adds secondary, status and dark surface tokens, the type scale, motion and voice (Write: "Paid in full, Oct 14." Not: "Woohoo, you got paid!").
AI-built pricing page, scored with five fixes
사용 전
Orbit pricing page, built in Lovable, dark theme, screenshot at 1440. Background #0F172A. Centered H1 "Simple, Transparent Pricing", 48 px bold, purple-to-pink gradient text. Monthly/Yearly toggle where the selected side is just a brighter color. Three glass cards (white/5 fill, backdrop blur, white/10 border) over a flat background, radius 24. Middle card has a purple glow and "Most Popular". Plan features in #64748B at 14 px with green check emoji. All three buttons are gradient "Get Started". Prices at 40 px. Then a 40-row comparison table with no sticky header, and an FAQ. Nothing says what a seat is.
사용 후
CRITIQUE: orbit.app/pricing (1440 px, source: screenshot, confidence: medium; mobile not checked) Brand kit: none Score: 18/35 Verdict: Rework | Dimension | Score | Evidence | | Hierarchy | 2 | Three identical gradient buttons; the purple glow is seen before any price | | Spacing rhythm | 3 | Card internals on a 4 px scale, but H1 to toggle is 24 px and toggle to cards 96 px | | Typography | 3 | 6 sizes, 3 weights; 40 px prices compete with the 48 px gradient H1 | | Color | 2 | Purple-to-pink gradient on the H1, buttons and glow; green emoji checks are the only other color | | Consistency | 3 | One card style and radius, but emoji checks in cards and SVG checks in the table | | Accessibility | 2 | Feature text #64748B on #0F172A is 3.75:1 (needs 4.5); billing toggle shows state by color only | | Polish | 3 | Real prices, but "seat" is never defined and the 40-row table loses its header on scroll | Generic tells found: gradient text, fake glassmorphism, glow shadows, everything centered, emoji icons. Top 5 fixes: 1. Accessibility: feature text at 3.75:1. Fix: --muted-foreground #94A3B8 (6.96:1 on the page, 5.71:1 on #1E293B cards). Priority 9 (I3 x R3 / E1) 2. Accessibility: toggle state is color only. Fix: a two-option radio group styled as a segmented control, selected segment filled with --primary and its label at 600, "Save 2 months [confirm]" beside Yearly. Priority 6 (I3 x R2 / E1) 3. Hierarchy: three equal buttons. Fix: one filled primary button on the recommended plan ("Start Team trial"), outline buttons on Starter and Scale. Priority 9 (I3 x R3 / E1) 4. Color: gradient text, glow and glass. Fix: solid #F8FAFC H1 (17.06:1), solid #1E293B cards with a 1 px #334155 border, no glow; mark the recommended plan with a 2 px --primary border and a "Recommended" label. Priority 6 (I2 x R3 / E1) 5. Polish: undefined seat, unreadable table. Fix: under each price, "Seat: one person who can sign in. Viewers are free [confirm]"; sticky table header; show only rows that differ between plans, with "Show all 40 features" below. Priority 2 (I2 x R2 / E2) What is working: every card shows a real price with no "Contact us" wall, and the FAQ answers billing questions directly.
iOS time slot picker, specced for older patients
사용 전
Spec the "pick a time" step in Fernway's patient booking app (iOS, SwiftUI). Today it's a web-style dropdown with 30 times and patients over 60 keep mis-tapping. Brand kit: Fernway v1.0.
사용 후
COMPONENT SPEC: Time slot picker (iOS, SwiftUI) Brand kit: Fernway v1.0 Job: a patient picks one open time on a chosen day in two taps. Use instead of: a dropdown or wheel with more than 7 options. Do not use for: dates more than 14 days out; use the native date picker first. Anatomy 1. Sheet with medium and large detents, grabber visible 2. Day strip: 14 days, horizontal scroll, selected day filled with --primary 3. Slot grid grouped Morning / Afternoon / Evening, headers in the Headline text style 4. Slot button: time only, "9:30" 5. Sticky footer: "Book Tue, Oct 6 at 9:30" above the home indicator Sizes Slot: 48 pt tall (44 pt minimum), 3 columns on iPhone, 8 pt gaps Day chip: 52 x 64 pt Footer button: 50 pt tall, 16 pt side margins, bottom padding = safe area inset + 8 pt States Available: --card fill, 1 pt --input border #8B938E (3.15:1 on white) Selected: --primary #1F5C46 fill, white label (7.84:1), checkmark SF Symbol Taken: not shown. Only open times appear. Day with no times: "No times" in --muted-foreground (6.21:1 on card); tap offers "Join waitlist" Loading: 6 skeleton slots in the final grid shape Footer: disabled "Choose a time" until a slot is selected Accessibility Each slot is a Button labeled "9:30 AM, Tuesday, October 6", with the Selected trait when chosen Dynamic Type: Body style; 2 columns at accessibility sizes, 1 column at the largest Changing the day announces "12 times available" Selection haptic on slot tap, nothing else Do: show only open times. Don't: gray out taken times to look busy. Acceptance checks: every target 44 pt or more in Accessibility Inspector; footer clear of the home indicator on every iPhone size; no truncated times at the largest accessibility size. Excerpt. The full spec adds Variants, Behavior, Content rules, Tokens used and Open questions.
구성
- design-studio.zip
Kit 소개
Turn a five-line brief into a brand kit with contrast-checked colors, a type scale and drop-in CSS variables and Tailwind tokens, and turn any screenshot into a score out of 35 with the five fixes worth doing first. The skill gives your AI the judgment of a senior product designer in Claude, ChatGPT, Codex and Cursor. It is most useful when AI is writing your UI code, because the model gets exact values instead of adjectives. Setup takes about 5 minutes.
What you get
- Five modes in one skill. BRAND KIT, PAGE DESIGN, COMPONENT SPEC, CRITIQUE and HANDOFF, all using the same token names and output blocks, so the kit you make on Monday is the one the critique scores against on Friday.
- Brand kits as code. Color roles with every text pair's contrast ratio computed, a type pairing and scale, spacing, radius, elevation, motion and voice, delivered as CSS variables plus a Tailwind v4
@themeblock that drops into shadcn/ui projects. - A critique rubric with scoring anchors. Seven dimensions (hierarchy, spacing rhythm, typography, color, consistency, accessibility, polish) scored out of 35, with verdict thresholds, a priority formula for ranking fixes, and a brand drift table.
- A taste section. The 13 tells of generic AI UI (violet gradients, card soup, emoji icons, fake glass, everything centered) and what to do instead, used both to review and to stop the model producing them.
- iOS and mobile rules. 44 pt targets, safe areas, Dynamic Type through accessibility sizes, native patterns, and a full checklist.
- Reference files the model reads on demand. WCAG thresholds with 20 computed ratios for common Tailwind defaults, 11 font pairings with licenses, spacing and radius scales, a brand kit template, a component spec template, and a worked example that goes from a brief to tokens, to a 14/35 critique of an AI-built page, to the page design for its rebuild.
Who it is for
- Founders and developers building with v0, Lovable, Bolt, Cursor, Codex or Claude Code who are tired of their product looking like everyone else's.
- Product designers who want specs, critiques and handoff notes drafted in their own system's vocabulary.
- Small teams without a designer who need a brand kit before the first real launch.
- Anyone shipping an iOS or mobile web app who wants the platform rules checked, not guessed.
What it will not do
- Draw logos, illustrations or final artwork. It writes the art direction; a designer or image tool makes the asset.
- Certify accessibility compliance. It flags contrast, focus, target size and labeling issues, but it is not a legal audit or a VPAT.
- Invent proof. Customer logos, metrics, testimonials and prices stay marked
[confirm]until you supply them. - Copy competitors. It borrows patterns, never text, images or distinctive marks.
- Connect to your apps. It works on what you paste, upload or let your AI tool open.
리뷰
아직 리뷰가 없어요.
디자인 Kit 더 보기
Design Studio Kit
Brand kits, scored critiques and launch checks so AI-built UI stops looking generic.
Design Studio Bot
A Grok teammate that scores your live pages every Friday and drafts the fixes.
Design Studio Dot
Your dot checks every launch asset against your brand kit before it ships.