Topic · 5 posts

Build & Code

Crade reads briefs, code, and build output on your screen and gets you from idea to working code without the middle steps. Faster scaffolding, fewer Stack Overflow searches.

Ship a landing page in 30 seconds.

NotesFileEditViewGoWindow

Jun 14, 2026 · 10:42 AM

Sundance Coffee — landing brief

Tom Bennett · for Northbeam Studio

About

•Boulder-based wholesale roaster, since 2019
•Family business — Tom + Lisa Bennett
•Specialty: single-origin + signature blends

Customers

•Cafes (5lb+ wholesale bags)
•Subscription boxes (12oz / month)
•Pop-up booths at farmers markets

Vibe

•Warm · earthy · neighborhood
•NOT corporate / Starbucks
•Quality + family roots emphasis

Need

•Replace old Squarespace landing
•Show wholesale + B2C side-by-side
•Brand colors: warm amber + cream

Hero headline idea: “Boulder's freshest roasts.”

Sundance Coffee Roasters×

localhost:3000

⌘R

Sundance Coffee Roasters

WholesaleSubscribeStoryOrder →

Boulder · Since 2019

Boulder's freshest roasts.

Direct from our family to your cafe or kitchen.

Order wholesale →Try a box

🌱

Single-origin

Direct from farms we know by name.

☕

Signature blends

Crafted weekly in small batches.

📦

Bulk wholesale

Free shipping on orders over $500.

For cafes

$220/ 5lb bag

Free shipping over $500

For everyone

$24/ 12oz monthly

Cancel anytime · pause anytime

New chat

Build a landing page from this brief.

✓ Read brief from Notes — Sundance Coffee Roasters ✓ Created sundance-coffee/ (Next.js 15) ✓ Generated 4 sections — Hero · Features · Pricing · CTA ✓ Applied palette amber #D2691E + cream #FDF6E3 ✓ Started dev server → localhost:3000 ✓ Opened in browser

Ask anything...

June 17, 2026 · 6 min read

Ship a landing page in 30 seconds with Crade

A brief lands in your Notes app. Thirty seconds later, the landing page is open in your browser. Here is what to put in front of Crade, what to say, and the exact step-by-step from brief to live preview.

AppFileEditViewWindow

9:24

dashboard — ~/projects/acme-app

1import { NextPage } from 'next'

2import { getSession } from '@/lib/auth'⚠ Cannot find module

3import { db } from '@/lib/db'

5export default async function Dashboard() {

6 const session = await getSession()

7 const users = await db.query('SELECT * FROM users')

PROBLEMS1OUTPUTTERMINAL

$ npm run build

Creating an optimized production build...

Failed to compile.

./src/app/dashboard/page.tsx

Module not found: Can't resolve '@/lib/auth'

Import trace for requested module:

./src/app/dashboard/page.tsx

./src/middleware.ts

> Build failed because of webpack errors

$ _

New chat

Why is my build failing?

The import `@/lib/auth` doesn't exist. Your auth file is at `@/lib/authentication`. Rename the import and it will compile.

Ask anything about your screen...

June 17, 2026 · 4 min read

Why is my build failing? Debug any compile error with Crade

Build red. Stack trace. Module not found. Type mismatch. Crade reads your editor, terminal, and error output on screen and tells you exactly what is wrong and how to fix it.

TablePlusFileEditViewWindow

id, email, signup_date, tier...

▸ orders

id, user_id, amount...

products

sessions

events

SELECT u.id, u.email, u.signup_date

FROM users u

LEFT JOIN orders o

ON o.user_id = u.id

AND o.created_at > NOW() - '30 days'::INTERVAL

WHERE u.signup_date >= '2026-05-01'

AND u.signup_date < '2026-06-01'

AND o.id IS NULL;

Results . 47 rows in 0.082s

id	email	signup_date
18293	[email protected]	2026-05-28
18287	[email protected]	2026-05-26
18271	[email protected]	2026-05-24
18259	[email protected]	2026-05-22
18241	[email protected]	2026-05-19
18222	[email protected]	2026-05-15

New chat

Find users who signed up in May 2026 but have not placed an order in the last 30 days.

SELECT u.id, u.email, u.signup_date FROM users u LEFT JOIN orders o ON o.user_id = u.id AND o.created_at > NOW() - INTERVAL '30 days' WHERE u.signup_date >= '2026-05-01' AND u.signup_date < '2026-06-01' AND o.id IS NULL ORDER BY u.signup_date DESC; 47 rows. Good candidates for a re-engagement email.

Ask anything about your screen...

June 17, 2026 · 4 min read

Write any SQL query from plain English with Crade

Crade reads your database schema on screen and gives you the exact SQL for what you actually want, in PostgreSQL, MySQL, BigQuery, or whatever you are running.

VS CodeFileEditViewWindow

9:24

checkout.service.ts — Working Tree

checkout.service.tsuser.repository.ts

import { db } from '../db';

import { users } from '../models';

export async function getUserOrders(userId: string) {

const orders = [];

try {

// Fetch user

const rawQuery = `SELECT * FROM users WHERE id = '${userId}'`;

const user = await db.query(rawQuery);

// Get orders for each

} catch (e) { console.log(e); }

for (const u of users) {

const o = await db.query('SELECT * FROM orders WHERE user_id = $1', [u.id]);

mainTypeScript3 warnings1 error

New chat

Review this code for bugs, security issues, and obvious cleanup.

Bug (line 8): rawQuery uses string interpolation. SQL injection risk. Use parameterized query: db.query(sql, [userId]) Bug (line 12): error swallowed. Logging without rethrow means callers think the operation succeeded. Performance (line 14): single query inside the loop. 200 users = 200 queries. Use IN clause. Nit: rename users to userList for clarity. users is shadowing the import. Priority: fix the SQL injection first.

Ask anything about your screen...

June 17, 2026 · 4 min read

Code review any function or PR with Crade

Crade reads the code on your screen and flags bugs, security issues, performance problems, and style nits. Use it before you push, or as a second pair of eyes on a PR.

FigmaFileEditViewWindow

9:24

acme-landing-v3 / Hero . Pricing

ProductPricingCustomers

Get started

Ship the right thing,
measured.

The analytics platform built for product teams who want to know what is working. Stop guessing and start measuring. Built for teams of any size.

See what users do, fast.

📈

Funnels

Find where users drop off.

🎯

Targeting

Reach the right ones.

Hero frame . 1440 x 5643 layers

New chat

Critique this landing page design. What is working, what is not, what should I change first?

Working: . Hero headline is specific and scannable . Single CTA, no competing buttons . Logo bar adds trust without bloat Not working (in priority order): 1. Hero CTA "Get started" is generic. Specific verb beats generic. Try "Start a free project" or "See it on your data". 2. Hero subtitle is two sentences when one would do. Cut the second. 3. Feature card icons feel disconnected from the content. Either ditch the icons or make them subject-specific. 4. Typography scale is too tight. Hero 56px → subtitle 18px is a big jump but features 24px → body 14px is jammed. Increase the body or shrink the headline. Fix first: the CTA copy. Single change, biggest impact on conversion.

Ask anything about your screen...

June 17, 2026 · 3 min read

Critique any Figma file in 30 seconds with Crade

Crade reads the Figma file on your screen and gives you specific design feedback: spacing, typography, visual hierarchy, what is working, what is not.