🤖 AI Development Workflow.
Build products in days, not months. Master the prompt strategy, AI skills, MCP servers, and iterative development.
The master prompt strategy.
The quality of your AI-generated code depends entirely on your prompt. A good prompt includes: the project goal, competitor URLs for analysis, design guidelines (DESIGN.md), and specific feature requirements.
Example master prompt:
"Build a responsive online ruler tool with these requirements:
- Auto-calibration for screen size
- Multiple units (cm, inches, pixels)
- Dark mode toggle
- Mobile responsive
- Better UI than [competitor-url-1] and [competitor-url-2]
- Use Vercel design.md for premium styling
- MPA architecture with AstroJS"Setting up AI skills and MCP servers.
AI skills are instruction sets that teach your AI agent how to perform specific tasks. Install these two essential skills: Web Design Guidelines (for premium UI) and Tailwind CSS v4 Docs (for correct styling). Additionally, connect the Astro Docs MCP server so your AI writes code for the latest Astro version.
Using Vercel's DESIGN.md for premium UI.
Vercel's DESIGN.md provides a complete design system with colors, typography, spacing, and component specifications. By referencing it in your prompts, AI generates websites that look professional rather than generic.
Token optimization and session management.
AI agents have context limits. As your conversation grows longer, the AI may lose track of earlier instructions or run out of "intelligence." The solution: use /clear frequently and start new sessions for each distinct task.
Iterative development: review, fix, enhance.
AI rarely gets everything perfect on the first try. The workflow is: generate → review → fix bugs → add features → review again. Test on both desktop and mobile, check dark mode, verify all interactive features.
Professional branding: favicons, dark mode, responsiveness.
Three details separate amateur tools from professional ones: Favicon (use logofa.st to generate), Dark mode (essential for modern tools), and Mobile responsiveness (most users are on phones). Add all three before deployment.
Favicon workflow:
1. Go to logofa.st
2. Select a preset and customize icon
3. Download the favicon package
4. Go to realfavicongenerator.net
5. Upload and configure
6. Download generated files
7. Place in /public directory