Mockup Starter: Interview, Then Build
The smallest useful set for building a UI mockup with Claude Code. Brief Me interviews you about audience, value proposition and goal, and writes a BRIEF.md. Create Mockup then reads that brief, asks a few questions about look and pages, and builds accessible Astro, React or plain-HTML pages with Tailwind CSS v4 that follow your CLAUDE.md and DESIGN.md. Start here if you want a first version of a site or page that matches the business behind it, not a generic template. Requires a project with a package.json, a CLAUDE.md and Tailwind CSS v4.
Works with every agent that reads SKILL.md — Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Windsurf, OpenClaw, and more.
One payment, lifetime access. 2 skills unlock instantly in your library.
30-day refund guarantee
Instant unlock in your library
Free updates from the creator
What's included
2 skillsInterviews you about a site or app's business requirements — audience, value proposition, goal, tone — before any mockup or code gets written, and hands off the answers as a durable BRIEF.md file.
Interviews you on site type, look and pages, then builds accessible Astro, React or plain-HTML mockups with Tailwind CSS v4 that follow your CLAUDE.md, DESIGN.md and BRIEF.md. No Figma file needed.
See it in action
Brief Me — Pre-Build Requirements Interview
Example session with this skill installed
I want to build a landing page for IRONCLAD STRENGTH, a boutique strength-training gym opening its second location in Austin, Texas — 3,200 sq ft, 8 private coaching bays, 12-person max class size, $189/month, targeting professionals aged 28-45 who tried commercial gyms and quit within 3 months. Interview me first so we get the requirements right before any design work starts.
- Read your context and instructions
- Compiled the brief me
- Generated the UI component
I'll run a short structured interview before we design anything — four rounds of questions, each with concrete options plus an open "Other" field, so most answers are quick confirmations rather than free-typing.
Round 1 (site type / target / value proposition / goal): Landing page (single-page pitch) -> General consumers (B2C) -> Quality/trust (certified coach + written program, not an anonymous big-box gym) -> Free trial session booking.
Round 2 (persona detail): 28-45, dual-income, mid-to-upper disposable income — gym dropouts, not gym novices.
Round 3 (differentiation / device priority / brand assets — "scale" skipped automatically, nothing to enumerate on a single-page pitch): Design/UX differentiation -> Roughly even mobile/desktop split -> Logo and brand colors already exist (second location).
Round 4 (notes): Avoid flashy effects — no "grind harder" clichés, no sweat-drenched hero shots, no countdown-timer urgency.
Here's BRIEF.md, written to your project root:
BRIEF
Site Type
A single-page landing page (LP) focused on one conversion goal: booking a free trial session.
Target Audience
General consumers (B2C) — working professionals aged 28-45.
Persona Detail
Dual-income professionals aged 28-45 with mid-to-upper disposable income. Have tried commercial/big-box gyms before and quit within 3 months — they're not gym novices, they're gym dropouts looking for something that actually sticks.
Product / Value Proposition
Quality and trust: accountability over anonymity. Every member gets a certified coach and a written program — not just a keycard swipe into an empty room. Positioned above budget gyms ($20-40/month) and below fully personal training ($400+/month), at $189/month for a boutique 3,200 sq ft facility with 8 private coaching bays and a 12-person class cap.
Competitive Differentiation
Design and UX. The gym's actual edge is coaching structure, but the landing page itself needs to look and feel categorically different from typical fitness marketing — premium and trustworthy rather than loud or intense.
Device Priority
Roughly even split between mobile and desktop — prospective members are expected to browse on mobile during commutes and revisit on desktop before booking.
Existing Brand Assets
Logo and brand colors already exist (this is the brand's second location). Treat them as a fixed constraint in the next build step's color/style question rather than a free choice.
Goal (Conversion)
Convert landing page visitors into a booked free trial session — not a generic contact form, not a membership signup without trying the space first.
Notes
Avoid loud, "grind harder" fitness clichés — no sweat-drenched hero shots, no aggressive red/yellow accent colors, no countdown-timer urgency tactics. The tone should read as calm, premium, and trustworthy, closer to a boutique wellness brand than a typical gym flyer.
Next steps: BRIEF.md is saved. Hand it to whatever mockup-building or coding workflow you use next — many agentic build workflows pick up a BRIEF.md in the project root automatically, or you can just reference/paste it in as context.
brief-me-pre-build-requirements-intervie.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every skill in this bundle passes our trust checks.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back