BUNDLE Security scanned5 skills

    Mockup Studio: Brief, Build, Compare, Rewrite

    The full set for taking a page from idea to finished copy with Claude Code, all driven by one BRIEF.md. Brief Me interviews you about audience, value proposition and goal. Create Mockup builds one layout, or Create Multi Mockup builds several structurally different layouts of the same page so you can compare them. Escape AI Slop gives each layout a real structure instead of the default centered hero. Rewrite Me then rewrites the headings, body copy and CTAs against the same brief. Each skill also works on its own, so take the whole flow or only the steps you need. Requires a project with a package.json, a CLAUDE.md and Tailwind CSS v4.

    103 views

    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
    $39$71
    Save 45% · $32

    One payment, lifetime access. 5 skills unlock instantly in your library.

    30-day refund guarantee

    Instant unlock in your library

    Free updates from the creator

    What's included

    5 skills
    1/5
    Brief Me — Pre-Build Requirements Interview

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

    View skill
    $9$4.94Save 45%
    2/5
    Create Mockup — UI From Scratch, Matched to Your Stack

    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.

    View skill
    $19$10.44Save 45%
    3/5
    Create Multi Mockup — Compare Layout Patterns of One Page

    Builds several structurally different layouts of a whole page or just one section in one run, with shared colors and a comparison page. Astro, React or plain HTML with Tailwind CSS v4.

    View skill
    $19$10.44Save 45%
    4/5
    Escape AI Slop — A Layout Reasoning Guide

    A reasoning guide, not a generator — stops your agent's UI output from collapsing into "AI slop" (the same centered hero, 2-column split, safe nuance palette every time). Applies eye-tracking layout models and cognitive-bias countermeasures so structure and color choices come from real content, not statistical safety.

    View skill
    $15$8.24Save 45%
    5/5
    Rewrite Me — Copy Rewrite Against Your BRIEF.md

    Rewrites headings, body copy, CTAs, and alt text inside already-built pages to match your BRIEF.md requirements — with optional volume control and behavioral-economics persuasion framing for landing pages, never fabricating data.

    View skill
    $9$4.94Save 45%

    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