<✦>aicodedesign.Start building

YOUR CREATIVE TOOLKIT

A better starting point.
Every time.

Original, editable playbooks for briefing, critiquing, checking, and debugging your AI-assisted work. No email gate.

Where should AI help in your workflow?

Map your next step, create an AI handoff, and prepare a test checklist for your prototype.

Explore the workflow and tools

NEW · THE DESIGN-TO-LAUNCH STUDIO

Make your design
do something.

Build a functional reading-list prototype. Keep your brief, decisions, test evidence, and portfolio story together.

FREE DOWNLOAD · MARKDOWN

AI-ready project brief

A practical starting point for your next build.

Download template
Audience and context
Who will use this? What are they trying to do?

Problem
What is difficult today? What evidence do you have?

Primary task
Describe the one action this version must support.

Scope
Must include:
Explicitly excluded:

Content and data
What is real, sample, local, or shared?
Who owns the data?

Visual direction
Hierarchy, typography, color roles, spacing, references and why.

Acc…

FREE DOWNLOAD · MARKDOWN

From generated to good

Review the details that make a product usable.

Download template
[ ] The primary user task is clear.
[ ] Every visible action works or clearly states its availability.
[ ] Form inputs have labels and useful error messages.
[ ] Keyboard navigation and visible focus work.
[ ] Text contrast and readability have been checked.
[ ] Layout works on narrow screens and at 200% text enlargement.
[ ] Empty, loading, success, and error states are defined.
[ ] Real saves ar…

FREE DOWNLOAD · MARKDOWN

The design critique prompt pack

Ask sharper questions about your interface.

Download template
1. TASK CLARITY
Evaluate this screen against [brief]. What could stop someone from completing [primary task]? Separate observations from assumptions.

2. HIERARCHY
What receives the most attention? Does that order match the task? Propose one focused change and a way to evaluate it.

3. RESPONSIVE BEHAVIOR
Review the provided layout and CSS for overflow, fixed widths, and content order. Explain wha…

FREE DOWNLOAD · MARKDOWN

The calm debugging worksheet

Find the problem before you ask for a fix.

Download template
Expected behavior:

Actual behavior:

Smallest reproduction steps:
1.
2.
3.

Environment and recent change:

Relevant error (remove secrets and personal data):

Affected code or boundary:

Proposed cause and supporting evidence:

Smallest proposed fix:

Original reproduction after fix:

Nearby regression check:

What I learned:…

Keep building with us.

Sign up for AI Code Design project tips, new learning resources, and workshop announcements. The signup form opens on MailerLite. Subscribe only if these updates are useful to you; you can unsubscribe from the emails.

Sign up with MailerLite