Design Studio Bot
A Grok teammate that scores your live pages every Friday and drafts the fixes.
GetKits 제작
차이를 직접 확인하세요
Friday design review in one message
사용 전
Routine: Weekly design review, Fri Oct 9, 3:00 PM America/New_York. Four URLs from the Notion review list: home, pricing, onboarding (staging), settings (staging).
사용 후
Pricing up 7 to 25/35, home 29/35, onboarding new at 20/35 (Rework). New blocker: onboarding "Continue" is #FFFFFF on #8B5CF6, 4.23:1, and violet is off-brand (expected --primary #C2410C, 5.18:1). Not reviewed: settings, login required. Drafted: a #design post and 3 Linear issues. DECISION: approve all, Slack only, issues only, or skip?
Signup page review requested in Slack
사용 전
Slack #design-review, Tue Oct 13, America/New_York Jonah Pike (11:02 AM): review: https://staging-preview.orbit.app/signup goal: finish signup in under a minute. brand check too pls, we want it live Thu Oct 15 Ana Ruiz (11:06 AM): fwiw I like the pill buttons, they feel friendlier than the square ones Jonah Pike (11:09 AM): also Talk to sales was a request from the sales team, keep it if you can
사용 후
CRITIQUE: staging-preview.orbit.app/signup (1440 and 390 px, source: live, confidence: high) Brand kit: Orbit v1.2 Score: 24/35 Verdict: Fix then ship | Dimension | Score | Evidence | | Hierarchy | 3 | "Talk to sales" is filled #0F172A, as large as "Create account" | | Spacing rhythm | 5 | 4 px scale: 8 label to field, 16 between fields, 32 between groups | | Typography | 3 | Inter 700 H1, the rest IBM Plex Sans 400 and 600; 5 sizes | | Color | 4 | --primary only on "Create account" and links; sales button adds a second fill | | Consistency | 3 | Pill buttons beside 6 px inputs; no other page has an Inter H1 | | Accessibility | 2 | Password hint #94A3B8 on #FFFFFF is 2.56:1; invalid email marked only by a red border | | Polish | 4 | Real copy, submit loading state; "Join 10,000+ data teams" unsourced | Generic tells found: untouched template defaults, invented stats. Brand drift: | Element | Expected | Found | Severity | Fix | | H1 | IBM Plex Sans 600 | Inter 700 | Off-brand | font-sans font-semibold | | Password hint | --muted-foreground #64748B | #94A3B8 | Off-brand | text-muted-foreground | | Proof line | sourced claim | "Join 10,000+ data teams" | Off-brand | Cut, or a verified count [confirm] | | Buttons | --radius-md 6 px | 9999 px | Drift | rounded-md | Top 5 fixes: 1. Accessibility: hint at 2.56:1. Fix: text-muted-foreground #64748B (4.76:1). Priority 6 (I3 x R2 / E1) 2. Accessibility: email error by color only. Fix: alert icon plus "Enter a work email" below it, via aria-describedby. Priority 6 (I3 x R2 / E1) 3. Hierarchy: two filled buttons. Fix: "Talk to sales" as a text link; "Create account" the one bg-primary button. Priority 9 (I3 x R3 / E1) 4. Typography: Inter H1. Fix: font-sans font-semibold. Priority 6 (I2 x R3 / E1) 5. Polish: unsourced "10,000+". Fix: cut it, or a verified count [confirm]. Priority 6 (I2 x R3 / E1) What is working: three labeled fields only; 16 px inputs at 390 px (no iOS zoom). Draft thread reply: Signup: 24/35, Fix then ship (Orbit v1.2). 1. Password hint is 2.56:1; use text-muted-foreground (4.76:1). 2. Email errors need an icon and text, not just a red border. 3. Talk to sales becomes a text link; Create account is the one filled button. Before Thu: Plex Sans 600 H1, 6 px buttons, source "10,000+" or cut it. DECISION: Reply in Jonah's thread with the draft? Options: A. post the draft B. skip Recommendation: A, so the fixes land before Thursday. Needed by: Wed Oct 14, 10:00 AM America/New_York
Brand audit of a page before launch
사용 전
@Design Studio /Brand consistency audit https://staging-preview.orbit.app/integrations before Thursday's launch. Brand kit is in Notion.
사용 후
CRITIQUE: staging-preview.orbit.app/integrations (1440 and 390 px, source: live, confidence: high) Brand kit: Orbit v1.2 Brand drift: | Element | Expected | Found | Severity | Fix | | "Connect" buttons | --primary #C2410C | #EA580C, white label 3.56:1 | Off-brand | bg-primary (5.18:1) | | Hero subhead | verified claim | "Seamless integrations with 100+ tools" | Off-brand | Remove "Seamless" (avoid list); count the live integrations [confirm] | | Card radius | --radius-xl 12 px | 16 px | Drift | rounded-xl | | H2 weight | IBM Plex Sans 600 | 700 | Drift | font-semibold | | Section padding | 96 px | 72 px | Drift | py-24 | | Integration logos | one size, 40 px tiles | 40 to 56 px, mixed | Drift | size-10 tiles on bg-muted | | Icon stroke | 1.5 px | 2 px on 3 icons | Nit | strokeWidth 1.5 | | Footer link gap | 8 px | 6 px | Nit | gap-2 | Verdict: Fix then ship (2 Off-brand, 4 Drift, 2 Nit) All eight fixes are token or copy changes; estimated under two hours in total. ISSUE DRAFT 1 Title: Integrations: Use --primary on Connect buttons Labels: design-debt, color Priority: Urgent Evidence: #FFFFFF on #EA580C is 3.56:1 on 14 Connect buttons Fix: bg-primary text-primary-foreground (5.18:1) Acceptance check: no #EA580C in the built CSS; contrast 4.5:1 or more ISSUE DRAFT 2: Integrations: Replace the "100+ tools" claim (High) DECISION: Create both issues in Linear (Web, design-debt)? Options: A. create both B. create 1 only C. skip Recommendation: A. Both block Thursday's launch. Needed by: Wed Oct 7, 12:00 PM America/New_York
Monthly competitor landing page scan
사용 전
Routine: Monthly competitor scan, Mon Oct 5, 10:00 AM America/New_York. Competitors (Notion): northwind-analytics.com, acmemetrics.io, kestrel.so, plus their pricing pages. Last scan: September 2026.
사용 후
COMPETITOR SCAN: October 2026 (3 sites, scanned Mon Oct 5) | Company | Hero promise (H1, verbatim) | Primary action | Proof shown | Pricing shown | Visual signature | Changed since last scan | | Northwind Analytics | "Every metric, one place" | Get started free | 6 customer logos | Yes, from $49/mo | Indigo gradient, Inter, angled 3D dashboard | New autoplay hero video | | Acme Metrics | "Analytics your whole team will actually use" | Book a demo | 2 named quotes, "4,000 teams" | No | Bright blue, 16 px radius, flat illustrations | Public pricing removed | | Kestrel | "Answers in seconds, not sprints" | Start trial | Live product embed | Yes, from $29/seat | Black and lime, mono headings, real UI | None | Category defaults (3 or more share it): a dashboard as the hero visual, a six-card feature grid, "team" in the hero copy. Worth adapting (the pattern, not the expression): Kestrel's live product embed answers "what does it look like" without a video. Whitespace (nobody does it): none of them shows a real question answered in the hero ("Which onboarding step loses the most users?"). Orbit can lead with one. Not scanned: none. DECISION: Post this in #design and log it? Options: A. approve B. skip Recommendation: A. Acme hiding pricing is worth discussing before Orbit's pricing update. Needed by: Wed Oct 7, 5:00 PM America/New_York
구성
- design-studio-bot-setup.md
Kit 소개
Get a scored design review of every live and staging page each Friday, checked against your brand kit, with the fixes already drafted as Linear issues. This Grok Bot opens your pages in its browser, scores each one out of 35 on a fixed rubric and waits for your approval before anything is posted or filed. Once a month it scans competitor landing pages and tells you what they all do, so you can do something else. Setup takes about 12 minutes.
What you get
- A setup file that builds the Bot in one paste. Profile, description and a setup message that saves five skills and three routines, with the shared rubric and block formats inside every skill.
- Five skills. UI critique of a URL, Brand consistency audit against your Notion brand kit, Competitor design scan, Handoff notes for developers, and Design debt tickets for Linear, with deduplication against open issues.
- Three routines. A weekly design review every Friday at 3:00 PM, a monthly competitor scan on the first Monday, and an optional review-request routine that only fires on Slack messages starting with
review:in one channel. - Scores you can trust week to week. The same seven dimensions, scoring anchors, verdict thresholds and priority formula as the Design Studio Skill, with evidence on every score and computed contrast ratios, so a +7 on your pricing page means something.
- Approval on everything that leaves the conversation. The Bot drafts the Slack post, the Linear issues and the Notion log entry, then asks one DECISION question. Nothing is posted, filed or edited until you answer.
- Honest failure handling. Pages behind a login, sites that block the browser and missing brand kits are reported as "Not reviewed", never filled in from last week.
What it needs
- The Grok Bot desktop app.
- Notion: a Brand kit page with a version line, a list of up to ten pages to review, a list of 3 to 6 competitors, and two empty pages for the review log and handoff notes.
- Slack: a channel for the weekly summary, and optionally one for review requests.
- Linear: a team and a
design-debtlabel. - Pages that load without a login, such as production URLs and staging preview links.
Who it is for
- Founders and small product teams shipping weekly who want design quality tracked like any other metric.
- Design leads who want a first-pass review of every page before they spend their own time on it.
- Teams building UI with AI tools, where drift from the brand kit creeps in with every generated screen.
What it will not do
- Sign in to anything. It reviews pages that load without a login; use preview or share links for staging.
- Post in Slack, create Linear issues or edit Notion pages without your approval.
- Change your code, your site or your design files. It finds and ranks problems; people or your coding tools fix them.
- Copy competitors. The scan records patterns and verbatim headlines for reference only.
- Replace a formal accessibility audit. It catches contrast, focus and target-size problems, but it does not certify compliance.
리뷰
아직 리뷰가 없어요.
디자인 Kit 더 보기
Design Studio Kit
Brand kits, scored critiques and launch checks so AI-built UI stops looking generic.
Design Studio Dot
Your dot checks every launch asset against your brand kit before it ships.
Design Studio Skill
Brand tokens, page specs and scored critiques that stop AI-built UI looking generic.