BUNDLE Security scanned2 skills

    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.

    Masaaki Komori
    Created by
    Masaaki Komori
    $19$28
    Save 32% · $9

    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 skills

    See it in action

    Brief Me — Pre-Build Requirements Interview

    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

    Generated

    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.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 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

    Frequently asked questions

    More bundles from Masaaki Komori