| 136 | } |
| 137 | |
| 138 | function formatExtractedSection( |
| 139 | extracted: ExtractedDesign, |
| 140 | sourceMockup: string, |
| 141 | date: string, |
| 142 | ): string { |
| 143 | const lines: string[] = [ |
| 144 | "## Extracted Design Language", |
| 145 | `*Auto-extracted from approved mockup on ${date}*`, |
| 146 | `*Source: ${path.basename(sourceMockup)}*`, |
| 147 | "", |
| 148 | `**Mood:** ${extracted.mood}`, |
| 149 | "", |
| 150 | ]; |
| 151 | |
| 152 | if (extracted.colors.length > 0) { |
| 153 | lines.push("### Colors", ""); |
| 154 | lines.push("| Name | Hex | Usage |"); |
| 155 | lines.push("|------|-----|-------|"); |
| 156 | for (const c of extracted.colors) { |
| 157 | lines.push(`| ${c.name} | \`${c.hex}\` | ${c.usage} |`); |
| 158 | } |
| 159 | lines.push(""); |
| 160 | } |
| 161 | |
| 162 | if (extracted.typography.length > 0) { |
| 163 | lines.push("### Typography", ""); |
| 164 | lines.push("| Role | Family | Size | Weight |"); |
| 165 | lines.push("|------|--------|------|--------|"); |
| 166 | for (const t of extracted.typography) { |
| 167 | lines.push(`| ${t.role} | ${t.family} | ${t.size} | ${t.weight} |`); |
| 168 | } |
| 169 | lines.push(""); |
| 170 | } |
| 171 | |
| 172 | if (extracted.spacing.length > 0) { |
| 173 | lines.push("### Spacing", ""); |
| 174 | for (const s of extracted.spacing) { |
| 175 | lines.push(`- ${s}`); |
| 176 | } |
| 177 | lines.push(""); |
| 178 | } |
| 179 | |
| 180 | if (extracted.layout.length > 0) { |
| 181 | lines.push("### Layout", ""); |
| 182 | for (const l of extracted.layout) { |
| 183 | lines.push(`- ${l}`); |
| 184 | } |
| 185 | lines.push(""); |
| 186 | } |
| 187 | |
| 188 | return lines.join("\n"); |
| 189 | } |
| 190 | |
| 191 | /** |
| 192 | * Read DESIGN.md and return it as a constraint string for brief construction. |