デザインスタジオ Bot
毎週金曜に公開中のページを採点し、修正案を下書きする Grok のチームメイトです。
出品者：GetKits
その違いをご覧ください
金曜のデザインレビューを1通のメッセージで
ビフォー
ルーティン：週次デザインレビュー、10月9日(金) 15:00 America/New_York。Notion のレビューリストから URL 4件：ホーム、料金、オンボーディング（ステージング）、設定（ステージング）。
アフター
料金は7点上がって 25/35、ホームは 29/35、オンボーディングは初回で 20/35（作り直し）。 新しいブロッカー：オンボーディングの「Continue」が #8B5CF6 上の #FFFFFF で 4.23:1、しかもバイオレットはブランド逸脱（期待値 --primary #C2410C、5.18:1）。 未レビュー：設定、ログインが必要。 下書き済み：#design への投稿1件と Linear の Issue 3件。 決定：すべて承認、Slack のみ、Issue のみ、見送りのどれにしますか？
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.
レビュー
まだレビューはありません。
