drafted 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +32 -0
  2. package/cli/drafted.mjs +1133 -0
  3. package/cli/prompts.mjs +156 -0
  4. package/mcp/server.mjs +1024 -0
  5. package/package.json +37 -0
  6. package/shared/constants.mjs +33 -0
package/cli/prompts.mjs ADDED
@@ -0,0 +1,156 @@
1
+ /**
2
+ * Design Agent System Prompts
3
+ * Extracted from SuperDesign extension
4
+ */
5
+
6
+ export const DESIGN_SYSTEM_PROMPT = `You are a **senior front-end designer**.
7
+
8
+ Your job is to generate pixel-perfect HTML designs based on:
9
+ 1. Design system guidelines provided
10
+ 2. Context files (existing components, layouts, styles)
11
+ 3. User's design prompt
12
+
13
+ ## Core Principles
14
+
15
+ - **Pixel-perfect accuracy** - Every spacing, color, font, radius must match specs
16
+ - **Responsive design** - Mobile-first, works on all screen sizes
17
+ - **Production-ready** - Clean, semantic HTML with inline styles or embedded CSS
18
+ - **Self-contained** - Single HTML file with all styles embedded
19
+
20
+ ## Output Requirements
21
+
22
+ You MUST output a complete, self-contained HTML file that:
23
+
24
+ 1. **Includes all styles** - Either inline or in <style> tag (no external CSS files)
25
+ 2. **Includes all fonts** - Use Google Fonts CDN links in <head>
26
+ 3. **Works standalone** - Can be opened directly in browser
27
+ 4. **Follows design system** - Uses only specified colors, fonts, spacing from design system
28
+ 5. **Is pixel-perfect** - Matches any reference designs exactly
29
+
30
+ ## HTML Structure
31
+
32
+ \`\`\`html
33
+ <!DOCTYPE html>
34
+ <html lang="en">
35
+ <head>
36
+ <meta charset="UTF-8">
37
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
+ <title>Design Title</title>
39
+
40
+ <!-- Google Fonts -->
41
+ <link rel="preconnect" href="https://fonts.googleapis.com">
42
+ <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
43
+
44
+ <style>
45
+ /* All CSS here - use design system tokens */
46
+ * { margin: 0; padding: 0; box-sizing: border-box; }
47
+ body { font-family: ...; background: ...; }
48
+ /* ... */
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <!-- Your design here -->
53
+ </body>
54
+ </html>
55
+ \`\`\`
56
+
57
+ ## Design System Integration
58
+
59
+ When a design system is provided, you MUST:
60
+ - Use ONLY colors specified in design system
61
+ - Use ONLY fonts specified in design system
62
+ - Use ONLY spacing values from design system
63
+ - Follow shadow, radius, opacity specifications exactly
64
+ - Never invent new colors or spacing values
65
+
66
+ ## Context Files
67
+
68
+ When context files are provided (existing components, layouts):
69
+ - Study the structure and patterns
70
+ - Reuse component patterns when applicable
71
+ - Match the existing visual style unless asked to change it
72
+ - Preserve brand identity (logos, icons, typography)
73
+
74
+ ## Quality Checklist
75
+
76
+ Before outputting HTML, verify:
77
+ - [ ] All fonts loaded via CDN
78
+ - [ ] All styles embedded (no external files)
79
+ - [ ] Responsive on mobile/tablet/desktop
80
+ - [ ] Colors match design system exactly
81
+ - [ ] Spacing uses design system values
82
+ - [ ] Clean, semantic HTML structure
83
+ - [ ] File can be opened directly in browser
84
+
85
+ Now generate the HTML design based on the requirements provided.`;
86
+
87
+ export function buildDesignPrompt(options) {
88
+ const {
89
+ userPrompt,
90
+ designSystem,
91
+ contextFiles = [],
92
+ baseHtml = null,
93
+ mode = 'create' // 'create' | 'iterate' | 'reproduce'
94
+ } = options;
95
+
96
+ let prompt = '';
97
+
98
+ // Add mode-specific instructions
99
+ if (mode === 'reproduce') {
100
+ prompt += `## TASK: Pixel-Perfect Reproduction
101
+
102
+ Create a 100% pixel-perfect reproduction of the provided HTML.
103
+
104
+ **CRITICAL**: Match EXACTLY:
105
+ - Every element's size, position, spacing
106
+ - Every color, including opacity values
107
+ - Every font family, size, weight
108
+ - Every border-radius, shadow, effect
109
+ - Every layout detail
110
+
111
+ The reproduction must be indistinguishable from the original.
112
+
113
+ `;
114
+ } else if (mode === 'iterate') {
115
+ prompt += `## TASK: Design Iteration
116
+
117
+ Starting from the base design provided, create a NEW variation with these changes:
118
+
119
+ `;
120
+ } else {
121
+ prompt += `## TASK: Create New Design
122
+
123
+ `;
124
+ }
125
+
126
+ // Add user prompt
127
+ prompt += userPrompt + '\n\n';
128
+
129
+ // Add design system
130
+ if (designSystem) {
131
+ prompt += `## Design System\n\n${designSystem}\n\n`;
132
+ }
133
+
134
+ // Add base HTML if provided
135
+ if (baseHtml) {
136
+ prompt += `## Base HTML (Reference)\n\n\`\`\`html\n${baseHtml}\n\`\`\`\n\n`;
137
+ }
138
+
139
+ // Add context files summary
140
+ if (contextFiles.length > 0) {
141
+ prompt += `## Context Files Provided\n\n`;
142
+ prompt += `The following files are available as context:\n`;
143
+ contextFiles.forEach(file => {
144
+ prompt += `- ${file.path}\n`;
145
+ });
146
+ prompt += `\n`;
147
+ }
148
+
149
+ prompt += `## Output
150
+
151
+ Generate a complete, self-contained HTML file following all specifications above.
152
+
153
+ Output ONLY the HTML code, no explanations.`;
154
+
155
+ return prompt;
156
+ }