glyph-ai 0.5.1 → 0.6.0

package/bundled/server/context/prompt-builder.d.ts

@@ -12,6 +12,8 @@ export interface DesignBriefParams {
     designPrinciples?: string;
     /** Aesthetic preset: 'a' (Surgical), 'b' (Brutalist), 'c' (Editorial), 'd' (Dashboard/Functional), 'e' (Consumer/Warm), or undefined for brand default */
     preset?: 'a' | 'b' | 'c' | 'd' | 'e';
+    /** When true, Glyph uses its opinionated design judgment. Default: false (preserve existing design). */
+    redesign?: boolean;
 }
 export declare function buildDesignBrief(params: DesignBriefParams): Promise<string>;
 export interface DirectionBriefParams {
@@ -23,5 +25,7 @@ export interface DirectionBriefParams {
     count: number;
     designSystemContext?: string;
     projectTokens?: ProjectTokens;
+    /** When true, Glyph uses its opinionated design judgment. Default: false (preserve existing design). */
+    redesign?: boolean;
 }
 export declare function buildDirectionBrief(params: DirectionBriefParams): Promise<string>;

package/bundled/server/context/prompt-builder.js

@@ -2,12 +2,12 @@ import { getBrandReference, getBrandFullData } from './brand-references.js';
 import { renderAgentIdentity, renderDesignPhilosophy, renderPreset, renderScoringRubric, } from './design-philosophy.js';
 import { renderProjectTokens } from './token-template.js';
 import { renderReferenceSection } from './reference-images.js';
-import { renderTasteLayer } from './taste-layer.js';
+import { renderTasteLayer, renderPreserveVoice } from './taste-layer.js';
 // ---------------------------------------------------------------------------
 // Shared context builder — resolves brand data, philosophy, tokens once
 // ---------------------------------------------------------------------------
 async function buildSharedSections(params) {
-    const { fileContent, filePath, brand, instruction, designSystemContext, projectTokens, preset } = params;
+    const { fileContent, filePath, brand, instruction, designSystemContext, projectTokens, preset, redesign } = params;
     const isProjectMode = brand === 'project';
     let { boilerplates, commonPatterns, designPrinciples } = params;
     let resolvedBrandRef = '';
@@ -26,9 +26,9 @@ async function buildSharedSections(params) {
     }
     const sections = [];
     // -----------------------------------------------------------------------
-    // 0. Taste Layer — the opinionated voice that interprets everything below
+    // 0. Voice — opinionated (redesign) or preserving (default)
     // -----------------------------------------------------------------------
-    sections.push(renderTasteLayer());
+    sections.push(redesign ? renderTasteLayer() : renderPreserveVoice());
     // -----------------------------------------------------------------------
     // 1. Agent Identity — sets Claude's posture BEFORE anything else
     // -----------------------------------------------------------------------
@@ -65,14 +65,16 @@ ${fileContent}
     }
     sections.push(`## Source File\n${sourceBlock}`);
     // -----------------------------------------------------------------------
-    // 3. Design Philosophy (Sections 1-12) — non-negotiable constraints
+    // 3. Design Philosophy (Sections 1-12) — only in redesign mode
     // -----------------------------------------------------------------------
-    const philosophy = await renderDesignPhilosophy();
-    sections.push(philosophy);
+    if (redesign) {
+        const philosophy = await renderDesignPhilosophy();
+        sections.push(philosophy);
+    }
     // -----------------------------------------------------------------------
-    // 4. Active Aesthetic Preset — overrides philosophy where they conflict
+    // 4. Active Aesthetic Preset — only in redesign mode
     // -----------------------------------------------------------------------
-    if (preset) {
+    if (redesign && preset) {
         const presetContent = await renderPreset(preset);
         if (presetContent) {
             sections.push(presetContent);
@@ -81,7 +83,7 @@ ${fileContent}
     // -----------------------------------------------------------------------
     // 4b. Reference Images — visual anchors for the active preset
     // -----------------------------------------------------------------------
-    if (preset) {
+    if (redesign && preset) {
         const port = Number(process.env.GLYPH_PORT) || 3013;
         const referenceSection = await renderReferenceSection(preset, port);
         if (referenceSection) {
@@ -127,16 +129,29 @@ ${fileContent}
 Work in two passes per variation:
 1. **Structure** — Component hierarchy + layout utilities only (flex, grid, gap). No colors, typography, or visual styling. Verify information architecture.
 2. **Style** — Apply design tokens over the locked structure. Typography, colors, spacing, shadows, interactions. Do not reorganize structure to accommodate styling.`;
-    sections.push(isProjectMode
-        ? `## Workflow Rules
+    if (!redesign) {
+        // Preserve mode — respect existing design, don't impose opinions
+        sections.push(`## Workflow Rules
+- **Respect the existing design system** — colors, typography, spacing, component patterns. Do not change the aesthetic.
+- Use the project's existing token values. Do not introduce new colors, fonts, or visual patterns.
+- Preserve the source file's structure and functionality.
+- Variations should explore different **layouts, content arrangements, and structural approaches** — not different aesthetics.
+- Every variation must look like it belongs to the same product.
+
+${twoPassInstructions}`);
+    }
+    else if (isProjectMode) {
+        sections.push(`## Workflow Rules
 - **Adhere to the Design Philosophy above** — these are non-negotiable constraints.
 - If any generated code violates the anti-patterns table, fix it before outputting.
 - Use the project's existing color values, typography, spacing, and component patterns.
 - **Hierarchy: Philosophy constraints > Active Preset bans > Project values > Defaults.**
 - Preserve the source file's structure and functionality — only transform the visual presentation.
 
-${twoPassInstructions}`
-        : `## Workflow Rules
+${twoPassInstructions}`);
+    }
+    else {
+        sections.push(`## Workflow Rules
 - **Adhere to the Design Philosophy above** — these are non-negotiable constraints.
 - If any generated code violates the anti-patterns table, fix it before outputting.
 - Use the exact color values, typography, spacing, and component patterns from the Brand Design System.
@@ -146,6 +161,7 @@ ${twoPassInstructions}`
 - Preserve the source file's structure and functionality — only transform the visual presentation.
 
 ${twoPassInstructions}`);
+    }
     if (instruction) {
         sections.push(`## Additional Instructions\n${instruction}`);
     }
@@ -165,11 +181,11 @@ export async function buildDesignBrief(params) {
     // Scoring Rubric — self-evaluation before submitting
     // -----------------------------------------------------------------------
     const rubric = await renderScoringRubric();
-    sections.push(`## Your Task
-
-Generate exactly **${count}** distinct variations of the source file above, ${isProjectMode ? "improving the design using the project's own design system" : `each applying the **${params.brand}** design aesthetic`}. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.
-
-### Requirements
+    const taskPreamble = params.redesign
+        ? `Generate exactly **${count}** distinct variations of the source file above, ${isProjectMode ? "improving the design using the project's own design system" : `each applying the **${params.brand}** design aesthetic`}. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.`
+        : `Generate exactly **${count}** distinct variations of the source file above, **preserving the existing design system**. Each variation should explore a different layout or structural approach while staying true to the current aesthetic. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.`;
+    const taskRequirements = params.redesign
+        ? `### Requirements
 1. Each variation must be a **complete, working replacement** for the source file.
 2. Preserve all functionality — only change visual presentation and styling.
 3. Each variation should explore a **different interpretation** of the ${isProjectMode ? 'design' : 'brand aesthetic'}:
@@ -179,14 +195,32 @@ Generate exactly **${count}** distinct variations of the source file above, ${is
    - Variation 4+: Creative explorations (different layouts, emphasis, density)
 4. Comply with Design Philosophy constraints. ${isProjectMode ? "Use the project's existing token values." : 'Use the exact token values from the brand guide.'}
 5. Keep all imports and exports intact.
-6. Use inline styles or Tailwind classes as appropriate for the existing codebase.
+6. Use inline styles or Tailwind classes as appropriate for the existing codebase.`
+        : `### Requirements
+1. Each variation must be a **complete, working replacement** for the source file.
+2. Preserve all functionality — only change visual presentation and styling.
+3. **Use the existing design tokens** — same colors, fonts, spacing, border-radius, shadows. Do not change the aesthetic.
+4. Each variation should explore a **different structural approach** within the existing design:
+   - Variation 1: Faithful to current layout with subtle refinements
+   - Variation 2: Different layout arrangement (e.g. sidebar ↔ top-nav, grid ↔ list)
+   - Variation 3: Different content density or information hierarchy
+   - Variation 4+: Alternative structural approaches (card layouts, split views, etc.)
+5. Keep all imports and exports intact.
+6. Use inline styles or Tailwind classes as appropriate for the existing codebase.`;
+    const evalNote = params.redesign
+        ? `\n\n**If a variation looks like it could have been produced by a generic UI generator, it fails. Redesign it.**`
+        : `\n\n**Every variation must feel like it belongs to the same product as the original. If it looks like a different app, it fails.**`;
+    sections.push(`## Your Task
+
+${taskPreamble}
+
+${taskRequirements}
 
 ### Visual Self-Evaluation (Mandatory)
-For each variation: call \`preview_draft\` → screenshot → score 1-10 on: hierarchy clarity, type precision, color restraint, preset fidelity, whitespace composition. All must be 7+. If any < 7, fix the weakest element and re-evaluate. Max 2 rounds. Do NOT call \`submit_variations\` until all pass.
+For each variation: call \`preview_draft\` → screenshot → score 1-10 on: hierarchy clarity, type precision, color restraint, ${params.redesign ? 'preset fidelity' : 'design system fidelity'}, whitespace composition. All must be 7+. If any < 7, fix the weakest element and re-evaluate. Max 2 rounds. Do NOT call \`submit_variations\` until all pass.
 
 ${rubric}
-
-**If a variation looks like it could have been produced by a generic UI generator, it fails. Redesign it.**
+${evalNote}
 
 ### Output Format
 Return each variation in a labeled fenced code block:
@@ -200,10 +234,10 @@ Once all ${count} variations have passed visual self-evaluation (all dimensions
     return sections.join('\n\n');
 }
 export async function buildDirectionBrief(params) {
-    const { fileContent, filePath, direction, directionPath, instruction, count, designSystemContext, projectTokens } = params;
+    const { fileContent, filePath, direction, directionPath, instruction, count, designSystemContext, projectTokens, redesign } = params;
     const sections = [];
-    // 0. Taste Layer
-    sections.push(renderTasteLayer());
+    // 0. Voice — opinionated (redesign) or preserving (default)
+    sections.push(redesign ? renderTasteLayer() : renderPreserveVoice());
     // 1. Agent Identity
     const agentIdentity = await renderAgentIdentity();
     sections.push(agentIdentity);
@@ -221,11 +255,15 @@ export async function buildDirectionBrief(params) {
         dirSourceBlock = `**Path:** \`${filePath}\`\n\n\`\`\`tsx\n${fileContent}\n\`\`\``;
     }
     sections.push(`## Source File\n${dirSourceBlock}`);
-    // 4. Design Philosophy (non-negotiable constraints)
-    const philosophy = await renderDesignPhilosophy();
-    sections.push(philosophy);
+    // 4. Design Philosophy — only in redesign mode
+    if (redesign) {
+        const philosophy = await renderDesignPhilosophy();
+        sections.push(philosophy);
+    }
     // 5. The project direction — this is the primary design authority
-    sections.push(`## Project Visual Direction\n\nThis is the established design direction for this project. All variations MUST follow it.\n\n${direction}`);
+    sections.push(redesign
+        ? `## Project Visual Direction\n\nThis is the established design direction for this project. All variations MUST follow it.\n\n${direction}`
+        : `## Project Visual Direction\n\nThis is the established design direction for this project. All variations MUST preserve its aesthetic and work within it — do not change the visual identity.\n\n${direction}`);
     // 6. Project tokens (if available)
     if (projectTokens) {
         const rendered = renderProjectTokens(projectTokens);
@@ -237,20 +275,33 @@ export async function buildDirectionBrief(params) {
         sections.push(`## Raw Project Context\n${designSystemContext}`);
     }
     // 7. Workflow rules
-    sections.push(`## Workflow Rules
+    const dirTwoPass = `### Two-Pass Generation (Required)
+
+For each variation, work in two explicit passes:
+
+**Pass 1 — Structure:** Generate the component hierarchy and layout in semantic HTML. Use only structural utilities (flex, grid, gap, w-full, etc.). No colors, no typography classes, no shadows, no visual styling. Review the structure: does the hierarchy make sense? Is the information architecture clear? Are the right elements grouped together?
+
+**Pass 2 — Style:** Apply the direction's design tokens over the confirmed structure. Typography scale, color roles, spacing values, shadows, border radii, interaction states — all applied in this pass. The structure is locked; do not reorganize components to accommodate styling.`;
+    if (redesign) {
+        sections.push(`## Workflow Rules
 - **Adhere to the Design Philosophy above** — these are non-negotiable constraints.
 - **Follow the Project Visual Direction** — this is the established aesthetic for this project. Do not deviate.
 - If any generated code violates the anti-patterns table, fix it before outputting.
 - **Hierarchy: Philosophy constraints > Project Direction > Project token values > Defaults.**
 - Preserve the source file's structure and functionality — only transform the visual presentation.
 
-### Two-Pass Generation (Required)
-
-For each variation, work in two explicit passes:
-
-**Pass 1 — Structure:** Generate the component hierarchy and layout in semantic HTML. Use only structural utilities (flex, grid, gap, w-full, etc.). No colors, no typography classes, no shadows, no visual styling. Review the structure: does the hierarchy make sense? Is the information architecture clear? Are the right elements grouped together?
+${dirTwoPass}`);
+    }
+    else {
+        sections.push(`## Workflow Rules
+- **Preserve the existing design** — do not change the aesthetic, colors, typography, or visual patterns.
+- **Follow the Project Visual Direction** — this is the established identity. Work within it, not against it.
+- Use the project's existing token values. Do not introduce new design elements.
+- Variations should explore different **layouts, content arrangements, and structural approaches** — not different aesthetics.
+- Every variation must look like it belongs to the same product.
 
-**Pass 2 — Style:** Apply the direction's design tokens over the confirmed structure. Typography scale, color roles, spacing values, shadows, border radii, interaction states — all applied in this pass. The structure is locked; do not reorganize components to accommodate styling.`);
+${dirTwoPass}`);
+    }
     if (instruction) {
         sections.push(`## Additional Instructions\n${instruction}`);
     }
@@ -260,11 +311,11 @@ For each variation, work in two explicit passes:
     const variationBlocks = Array.from({ length: count }, (_, i) => {
         return `\`\`\`glyph-variation-${i + 1}\n// Variation ${i + 1} code here\n\`\`\``;
     }).join('\n\n');
-    sections.push(`## Your Task
-
-Generate exactly **${count}** distinct variations of the source file above, each following the **Project Visual Direction**. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.
-
-### Requirements
+    const dirTaskPreamble = redesign
+        ? `Generate exactly **${count}** distinct variations of the source file above, each following the **Project Visual Direction**. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.`
+        : `Generate exactly **${count}** distinct variations of the source file above, **preserving the existing design** while exploring different structural approaches. Each variation must follow the Project Visual Direction and use the same design tokens. This count is a hard requirement — generating fewer is a failure. You MUST produce all ${count} variations.`;
+    const dirTaskRequirements = redesign
+        ? `### Requirements
 1. Each variation must be a **complete, working replacement** for the source file.
 2. Preserve all functionality — only change visual presentation and styling.
 3. Each variation should explore a **different interpretation** of the direction:
@@ -274,7 +325,29 @@ Generate exactly **${count}** distinct variations of the source file above, each
    - Variation 4+: Creative explorations (different layouts, emphasis, density)
 4. Comply with Design Philosophy constraints. Use the direction's token values.
 5. Keep all imports and exports intact.
-6. Use inline styles or Tailwind classes as appropriate for the existing codebase.
+6. Use inline styles or Tailwind classes as appropriate for the existing codebase.`
+        : `### Requirements
+1. Each variation must be a **complete, working replacement** for the source file.
+2. Preserve all functionality — only change visual presentation and styling.
+3. **Use the existing design tokens** — same colors, fonts, spacing, border-radius, shadows. Do not change the aesthetic.
+4. Each variation should explore a **different structural approach** within the existing design:
+   - Variation 1: Faithful to current layout with subtle refinements
+   - Variation 2: Different layout arrangement (e.g. sidebar ↔ top-nav, grid ↔ list)
+   - Variation 3: Different content density or information hierarchy
+   - Variation 4+: Alternative structural approaches (card layouts, split views, etc.)
+5. Keep all imports and exports intact.
+6. Use inline styles or Tailwind classes as appropriate for the existing codebase.`;
+    const dirFidelityDimension = redesign
+        ? `**Direction fidelity** — Does this unmistakably follow the established project direction?`
+        : `**Design system fidelity** — Does this look like it belongs to the same product as the original?`;
+    const dirEvalNote = redesign
+        ? `\n\n**If a variation looks like it could have been produced by a generic UI generator, it fails. Redesign it.**`
+        : `\n\n**Every variation must feel like it belongs to the same product as the original. If it looks like a different app, it fails.**`;
+    sections.push(`## Your Task
+
+${dirTaskPreamble}
+
+${dirTaskRequirements}
 
 ### Visual Self-Evaluation (Mandatory Gate)
 
@@ -286,7 +359,7 @@ After generating each variation (both passes complete), you **MUST** evaluate it
    - **Optical hierarchy clarity** — Can the eye find the primary action in under 1 second?
    - **Typographic precision** — Is the type scale intentional? Are weights and sizes doing real work?
    - **Color restraint and intentionality** — Is every color earning its place? No decorative noise?
-   - **Direction fidelity** — Does this unmistakably follow the established project direction?
+   - ${dirFidelityDimension}
    - **Whitespace and composition** — Is spacing rhythmic and intentional, not just default gaps?
 4. If ANY dimension scores below 7: identify the single weakest element, propose a specific token-level fix, apply it, and re-evaluate
 5. Maximum 2 iteration rounds per variation
@@ -294,8 +367,7 @@ After generating each variation (both passes complete), you **MUST** evaluate it
 7. If still below threshold after 2 iterations, submit with a note explaining what couldn't be resolved
 
 ${rubric}
-
-**If a variation looks like it could have been produced by a generic UI generator, it fails. Redesign it.**
+${dirEvalNote}
 
 ### Output Format
 Return each variation in a labeled fenced code block:

package/bundled/server/context/taste-layer.d.ts

@@ -1,9 +1,17 @@
 /**
- * Creative/opinionated voice for variation generation and creative design
- * system modes (brand-inspired, guided). Injected at the very top of the
- * brief — before agent identity, before philosophy, before everything.
+ * Creative/opinionated voice for variation generation when the user has
+ * explicitly requested Glyph's design judgment (redesign: true).
+ * Injected at the very top of the brief — before agent identity, before
+ * philosophy, before everything.
  */
 export declare function renderTasteLayer(): string;
+/**
+ * Default preserve voice — respects the existing design system.
+ * Glyph scans and understands the current design language but does NOT
+ * impose its own aesthetic opinions. Variations stay within the
+ * established visual identity.
+ */
+export declare function renderPreserveVoice(): string;
 /**
  * Precise/systematic voice for generate_design_system extract mode.
  * When documenting what exists, accuracy matters more than opinions.

package/bundled/server/context/taste-layer.js

@@ -3,9 +3,10 @@
 // Taste Layer — the voice that interprets all design reference material
 // ---------------------------------------------------------------------------
 /**
- * Creative/opinionated voice for variation generation and creative design
- * system modes (brand-inspired, guided). Injected at the very top of the
- * brief — before agent identity, before philosophy, before everything.
+ * Creative/opinionated voice for variation generation when the user has
+ * explicitly requested Glyph's design judgment (redesign: true).
+ * Injected at the very top of the brief — before agent identity, before
+ * philosophy, before everything.
  */
 export function renderTasteLayer() {
     return `## Design Voice
@@ -14,6 +15,19 @@ export function renderTasteLayer() {
 
 You are a senior product designer with 15 years of craft experience. You have strong opinions and you act on them. You do not generate safe, average, or template-looking interfaces. Every layout decision is intentional. Every pixel of whitespace is earned. If a component looks like it could have been produced by a generic AI code generator, you redesign it until it couldn't have been. You treat the design system as a constraint to work within, not a paint-by-numbers kit. When in doubt, subtract. The best interfaces feel inevitable — like nothing could be added or removed.`;
 }
+/**
+ * Default preserve voice — respects the existing design system.
+ * Glyph scans and understands the current design language but does NOT
+ * impose its own aesthetic opinions. Variations stay within the
+ * established visual identity.
+ */
+export function renderPreserveVoice() {
+    return `## Design Voice
+
+> This sets the posture for everything that follows. Read all subsequent material through this lens.
+
+You are a senior product designer who deeply respects existing design systems. Your job is to understand the current design language — its colors, typography, spacing, component patterns, and overall aesthetic — and work faithfully within it. You do NOT redesign, restyle, or impose a different aesthetic. You preserve the existing visual identity while generating variations that explore different layouts, content arrangements, and structural approaches within the established design system. Every variation must feel like it belongs to the same product. When the existing design has clear patterns, follow them. When it has gaps, fill them by extending the existing language — not by introducing a new one.`;
+}
 /**
  * Precise/systematic voice for generate_design_system extract mode.
  * When documenting what exists, accuracy matters more than opinions.

package/bundled/server/mcp/tools/generate-variations.js

@@ -19,11 +19,23 @@ async function loadDirection(root) {
     return null;
 }
 export function registerGenerateVariations(server) {
-    server.tool('generate_variations', "Analyze a file and generate a design brief for creating UI variations. Uses the project's established design direction (design.md or redesign.md) as the constraint system. If no direction exists, tells the agent to create one first via generate_design_system.", {
+    server.tool('generate_variations', `Analyze a file and generate a design brief for creating UI variations. Uses the project's established design direction (design.md or redesign.md) as the constraint system.
+
+By default (redesign: false), Glyph preserves the existing design system — same colors, typography, spacing — and explores different layouts and structural approaches within it.
+
+Set redesign: true when the user's intent signals they want a new or different aesthetic. Examples of redesign intent:
+- "rethink the design", "new design system", "totally different look"
+- "make it look like Linear/Stripe/etc.", "redesign the landing page"
+- "I want Glyph's opinion", "make it better looking", "the design needs work"
+- "fresh design", "modern redesign", "overhaul the UI"
+- Any request for a brand aesthetic, preset, or style change
+
+Keep redesign: false (default) when the user just wants layout variations, structural alternatives, or component rearrangements without changing the visual identity.`, {
         file: z.string(),
         instruction: z.string().optional(),
         count: z.number().optional().default(4),
-    }, async ({ file, instruction, count }) => {
+        redesign: z.boolean().optional().default(false).describe('Set to true when the user wants a new aesthetic, different design system, or Glyph\'s opinionated design judgment. Keep false (default) for layout/structural variations that preserve the existing design.'),
+    }, async ({ file, instruction, count, redesign }) => {
         const projectRoot = process.env.GLYPH_PROJECT_ROOT || process.cwd();
         const filePath = path.resolve(projectRoot, file);
         track('mcp:generate_variations', { file, count });
@@ -71,6 +83,7 @@ export function registerGenerateVariations(server) {
             count,
             designSystemContext,
             projectTokens,
+            redesign,
         });
         track('prompt:generated', {
             file,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glyph-ai",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",
   "bin": {