Piyush RajYou are a senior product designer and front-end engineer building "Craftly": an original, natural-language website builder for students, creators, freelancers and small businesses. Work autonomously. Don't ask questions; make reasonable decisions and log them in README.md under "Decisions". STACK (fixed): React 18, Vite, Tailwind CSS, React Router, lucide-react, plain JavaScript (JSX). No other runtime dependencies. Google Fonts via <link> with system fallbacks. public/_redirects containing "/* /index.html 200". BRAND: Name Craftly. Tagline "Turn a clear idea into a working website." Voice: helpful, calm, plain, short sentences. Banned words: revolutionary, magic, instant, effortless, seamless, supercharge, unlock. No fake stats, logos, reviews or user counts. Mention AI only once, honestly, in the Responsible section. DESIGN TOKENS Colors: bg #FAF7F2 | surface #FFFFFF | sand #EDE6DA | line #E3DDD1 | muted #6B6B66 | ink #1F2321 forest-700 #1F4D3A (primary) | forest-800 #173B2C (hover) | forest-50 #E8F0EB action #D9622B (ONLY the single most important CTA per screen) | error #B3261E | success #2E7D4F All text/background pairs pass WCAG AA. Type: headings Fraunces 600; body/UI Inter 400/500/600. Scale 12/14/16/18/22/30/44/60. Line-height 1.5 body, 1.1 headings. Max 65ch. Layout: 12-col grid, max-width 1200px, gutter 24px (16px mobile), 4px spacing multiples, section padding 96px desktop / 56px mobile. Shape: radius 8px (inputs, buttons), 12px (panels). 1px borders in `line`. One shadow: 0 1px 2px rgba(31,35,33,.06), 0 4px 12px rgba(31,35,33,.05). Motion: 150ms color/opacity only. Respect prefers-reduced-motion. Focus: 2px forest outline, 2px offset, on every interactive element. Icons: lucide-react only, stroke 1.75, sizes 16/20. Forbidden visuals: gradients, glow, glassmorphism, emojis, stock photos, card-on-card nesting. Product visuals are real HTML/CSS UI, not images. ENGINEERING RULES - Folders: src/{components/ui,components,pages,layouts,data/templates,lib,hooks,context,styles}. One component per file. - Every page: semantic landmarks, one h1, <title> + meta description, keyboard operable. - No console errors/warnings, no unused imports/files, no dead links, no no-op buttons, no placeholder text, no raw errors shown to users. - All localStorage reads/writes wrapped in try/catch. Keys: craftly:v1:* - After finishing a phase: run `npm run build`, fix everything, then reply with the REPORT format below. REPORT FORMAT (end of every phase) 1) Files created/changed. 2) How I verified (commands, widths 360/768/1280). 3) Known issues. 4) "Ready for next phase: yes/no".
Sign in to leave a comment
Website builder
Describe the site you want in plain words. Craftly turns that description into a working website with pages and content â for students, creators, freelancers and small businesses.
This is an illustrative preview. Build page updates it from your description; no site is created or saved.
A starting point based on your description
A first look at A calm one-page site for, shaped from your description. Review the sections and decide what to change.
Get in touchDraft content for selected work will be shaped around your idea.
Draft content for about will be shaped around your idea.
Draft content for services will be shaped around your idea.
What Craftly does
Craftly is a natural-language website builder. You describe the site you want in plain language; it builds the pages and the content to match. No grids to learn, no blank canvas to stare at.
You write what you want in your own words. Craftly turns that description into a site with real pages and real content, laid out so you can read it, not just imagine it.
Students, creators, freelancers and small businesses. It is built for people who are not technical and who want a tool that respects the idea they already have.
Every page and every line of copy stays yours to change. When it reads the way you meant it to, publish the site so it is reachable at a shareable address.
Website builder
Describe the site you want in plain language. Craftly turns that description into pages and content you can read, edit and keep.
Create your account, then build your first page.
Website builder
Describe the site you want in plain words. Craftly turns that description into a working website with pages and content â for students, creators, freelancers and small businesses.
This is an illustrative preview. Build page updates it from your description; no site is created or saved.
A starting point based on your description
A first look at A calm one-page site for, shaped from your description. Review the sections and decide what to change.
Get in touchDraft content for selected work will be shaped around your idea.
Draft content for about will be shaped around your idea.
Draft content for services will be shaped around your idea.
What Craftly does
Craftly is a natural-language website builder. You describe the site you want in plain language; it builds the pages and the content to match. No grids to learn, no blank canvas to stare at.
You write what you want in your own words. Craftly turns that description into a site with real pages and real content, laid out so you can read it, not just imagine it.
Students, creators, freelancers and small businesses. It is built for people who are not technical and who want a tool that respects the idea they already have.
Every page and every line of copy stays yours to change. When it reads the way you meant it to, publish the site so it is reachable at a shareable address.
Website builder
Describe the site you want in plain language. Craftly turns that description into pages and content you can read, edit and keep.
Create your account, then build your first page.
No comments yet. Be the first!