diff --git a/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/mapping.json b/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/shape@2x.png b/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-ai-chat/images/shape@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-with-hover.html b/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-with-hover.html new file mode 100644 index 00000000..325965b9 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-with-hover.html @@ -0,0 +1,616 @@ + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-without-hover.html b/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-without-hover.html new file mode 100644 index 00000000..5f856167 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-ai-chat/output-without-hover.html @@ -0,0 +1,615 @@ + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-ai-chat/result.json b/data/ablation/conditions/hover-interaction/desktop-ai-chat/result.json new file mode 100644 index 00000000..d859055a --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-ai-chat/result.json @@ -0,0 +1,28 @@ +{ + "fixture": "desktop-ai-chat", + "type": "hover-interaction", + "hoverBlocksInDesignTree": 5, + "withHoverData": { + "hoverCssRules": 3, + "hoverCssContent": [ + "\n \n .button.neutral:hover {\n background: var(--color-CDCDCD);\n }", + "\n \n .button.primary:hover {\n background: var(--color-1E1E1E);\n }", + "\n \n .icon-button.subtle:hover {\n background: var(--color-F5F5F5);\n }" + ], + "tokens": { + "input": 23305, + "output": 16445 + }, + "htmlBytes": 43346 + }, + "withoutHoverData": { + "hoverCssRules": 0, + "hoverCssContent": [], + "tokens": { + "input": 23160, + "output": 16894 + }, + "htmlBytes": 44469 + }, + "timestamp": "2026-03-28T09:23:02.347Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/images/hero-image@2x.png b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/hero-image@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image-2@2x.png b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image-2@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image@2x.png b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/image@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/images/mapping.json b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-landing-page/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/output-with-hover.html b/data/ablation/conditions/hover-interaction/desktop-landing-page/output-with-hover.html new file mode 100644 index 00000000..5e475003 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-landing-page/output-with-hover.html @@ -0,0 +1,454 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/output-without-hover.html b/data/ablation/conditions/hover-interaction/desktop-landing-page/output-without-hover.html new file mode 100644 index 00000000..d6d51a8c --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-landing-page/output-without-hover.html @@ -0,0 +1,456 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-landing-page/result.json b/data/ablation/conditions/hover-interaction/desktop-landing-page/result.json new file mode 100644 index 00000000..35fcd074 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-landing-page/result.json @@ -0,0 +1,27 @@ +{ + "fixture": "desktop-landing-page", + "type": "hover-interaction", + "hoverBlocksInDesignTree": 4, + "withHoverData": { + "hoverCssRules": 2, + "hoverCssContent": [ + "\n \n .button.neutral:hover {\n background: var(--color-CDCDCD);\n }", + "\n \n .button.primary:hover {\n background: var(--color-1E1E1E);\n }" + ], + "tokens": { + "input": 22076, + "output": 14439 + }, + "htmlBytes": 38504 + }, + "withoutHoverData": { + "hoverCssRules": 0, + "hoverCssContent": [], + "tokens": { + "input": 21966, + "output": 14352 + }, + "htmlBytes": 38267 + }, + "timestamp": "2026-03-28T08:52:57.169Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/images/image@2x.png b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/image@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/images/mapping.json b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-2@2x.png b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-2@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-3@2x.png b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape-3@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape@2x.png b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/hover-interaction/desktop-product-detail/images/shape@2x.png differ diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/output-with-hover.html b/data/ablation/conditions/hover-interaction/desktop-product-detail/output-with-hover.html new file mode 100644 index 00000000..ed304e04 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-product-detail/output-with-hover.html @@ -0,0 +1,697 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/output-without-hover.html b/data/ablation/conditions/hover-interaction/desktop-product-detail/output-without-hover.html new file mode 100644 index 00000000..04af15c8 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-product-detail/output-without-hover.html @@ -0,0 +1,441 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+
+
+

Text Heading

+
+
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+

Text

+
+
+ + +
+
+ +
+ Value + + + +
+
+
+ +
+ Value + + + +
+
+
+ + +
+ Button +
+ + +
+
+
+ Title + + + +
+
+

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

+
+
+
+
+
+ + +
+ + + +
+
+
+ + +
+
+

Latest reviews

+
+ +
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+

Follow the latest trends

+

With our daily newsletter

+
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/hover-interaction/desktop-product-detail/result.json b/data/ablation/conditions/hover-interaction/desktop-product-detail/result.json new file mode 100644 index 00000000..8cc73ee9 --- /dev/null +++ b/data/ablation/conditions/hover-interaction/desktop-product-detail/result.json @@ -0,0 +1,26 @@ +{ + "fixture": "desktop-product-detail", + "type": "hover-interaction", + "hoverBlocksInDesignTree": 5, + "withHoverData": { + "hoverCssRules": 1, + "hoverCssContent": [ + "\n \n .icon-button:hover {\n background: var(--color-1E1E1E);\n }" + ], + "tokens": { + "input": 27891, + "output": 18731 + }, + "htmlBytes": 52425 + }, + "withoutHoverData": { + "hoverCssRules": 0, + "hoverCssContent": [], + "tokens": { + "input": 27749, + "output": 17425 + }, + "htmlBytes": 46460 + }, + "timestamp": "2026-03-28T09:16:42.300Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/code-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/code-baseline-1920.png new file mode 100644 index 00000000..a406b60f Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/code-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/code-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/code-stripped-1920.png new file mode 100644 index 00000000..2509db5f Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/code-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-baseline-1920.png new file mode 100644 index 00000000..c9f4e320 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-stripped-1920.png new file mode 100644 index 00000000..ad3cbeda Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/diff-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-baseline-1920.png new file mode 100644 index 00000000..62f2062f Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-stripped-1920.png new file mode 100644 index 00000000..62f2062f Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/figma-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/images/mapping.json b/data/ablation/conditions/size-constraints/desktop-ai-chat/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/images/shape@2x.png b/data/ablation/conditions/size-constraints/desktop-ai-chat/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-ai-chat/images/shape@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline-expanded.html new file mode 100644 index 00000000..43172845 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline-expanded.html @@ -0,0 +1,616 @@ + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline.html b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline.html new file mode 100644 index 00000000..325965b9 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-baseline.html @@ -0,0 +1,616 @@ + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped-expanded.html new file mode 100644 index 00000000..61bb494b --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped-expanded.html @@ -0,0 +1,512 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+
+
+ + + +
+ Flippy chats +
+ + + +
+
+ +
+ Search +
+ + + +
+
+ +
+
+ Chats +
+
+
+ Analog Clock React app +
+
+ Simple Design System +
+
+ Figma variable planning +
+
+ OKCLH token algorithm +
+
+ Component naming advice +
+
+
+
+ +
+
+ +
+ flippy@figma.com +
+
+ + +
+
+
+
+
+ Hey Flippy! Write me a script for building an Analag Clock. +
+
+ +
+
+ + + +
+ Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. +
+ +
+
+ 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +
+
+ import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]); +
+
+
+
+ +
+ What would you like to know? +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped.html b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped.html new file mode 100644 index 00000000..64d40cac --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/output-stripped.html @@ -0,0 +1,512 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+
+
+
+ + + +
+ Flippy chats +
+ + + +
+
+ +
+ Search +
+ + + +
+
+ +
+
+ Chats +
+
+
+ Analog Clock React app +
+
+ Simple Design System +
+
+ Figma variable planning +
+
+ OKCLH token algorithm +
+
+ Component naming advice +
+
+
+
+ +
+
+ +
+ flippy@figma.com +
+
+ + +
+
+
+
+
+ Hey Flippy! Write me a script for building an Analag Clock. +
+
+ +
+
+ + + +
+ Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. +
+ +
+
+ 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +
+
+ import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]); +
+
+
+
+ +
+ What would you like to know? +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-ai-chat/result.json b/data/ablation/conditions/size-constraints/desktop-ai-chat/result.json new file mode 100644 index 00000000..f2ed0853 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-ai-chat/result.json @@ -0,0 +1,18 @@ +{ + "fixture": "desktop-ai-chat", + "type": "size-constraints", + "baseWidth": 1200, + "expandedWidth": 1920, + "baselineSimilarity": 94, + "strippedSimilarity": 97, + "deltaV": -3, + "baselineTokens": { + "input": 23305, + "output": 16445 + }, + "strippedTokens": { + "input": 22968, + "output": 17628 + }, + "timestamp": "2026-03-28T09:10:05.503Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/code-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/code-baseline-1920.png new file mode 100644 index 00000000..e00858bb Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/code-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/code-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/code-stripped-1920.png new file mode 100644 index 00000000..38c9d128 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/code-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/diff-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/diff-baseline-1920.png new file mode 100644 index 00000000..03a37818 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/diff-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/diff-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/diff-stripped-1920.png new file mode 100644 index 00000000..a8d57793 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/diff-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/figma-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/figma-baseline-1920.png new file mode 100644 index 00000000..5371879c Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/figma-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/figma-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-landing-page/figma-stripped-1920.png new file mode 100644 index 00000000..5371879c Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/figma-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/images/hero-image@2x.png b/data/ablation/conditions/size-constraints/desktop-landing-page/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/images/hero-image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/images/image-2@2x.png b/data/ablation/conditions/size-constraints/desktop-landing-page/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/images/image-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/images/image@2x.png b/data/ablation/conditions/size-constraints/desktop-landing-page/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-landing-page/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/images/mapping.json b/data/ablation/conditions/size-constraints/desktop-landing-page/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline-expanded.html new file mode 100644 index 00000000..ff00d1bf --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline-expanded.html @@ -0,0 +1,454 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline.html b/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline.html new file mode 100644 index 00000000..e14e9690 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/output-baseline.html @@ -0,0 +1,454 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped-expanded.html new file mode 100644 index 00000000..449e7d30 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped-expanded.html @@ -0,0 +1,471 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped.html b/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped.html new file mode 100644 index 00000000..a1610c33 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/output-stripped.html @@ -0,0 +1,471 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-landing-page/result.json b/data/ablation/conditions/size-constraints/desktop-landing-page/result.json new file mode 100644 index 00000000..21839ed4 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-landing-page/result.json @@ -0,0 +1,18 @@ +{ + "fixture": "desktop-landing-page", + "type": "size-constraints", + "baseWidth": 1200, + "expandedWidth": 1920, + "baselineSimilarity": 99, + "strippedSimilarity": 91, + "deltaV": 8, + "baselineTokens": { + "input": 22076, + "output": 14403 + }, + "strippedTokens": { + "input": 21557, + "output": 14777 + }, + "timestamp": "2026-03-28T08:46:57.957Z" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/code-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/code-baseline-1920.png new file mode 100644 index 00000000..2d418539 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/code-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/code-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/code-stripped-1920.png new file mode 100644 index 00000000..e1d5c96d Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/code-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/diff-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/diff-baseline-1920.png new file mode 100644 index 00000000..a6f24caa Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/diff-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/diff-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/diff-stripped-1920.png new file mode 100644 index 00000000..1d46a5f5 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/diff-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/figma-baseline-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/figma-baseline-1920.png new file mode 100644 index 00000000..f84f5b35 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/figma-baseline-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/figma-stripped-1920.png b/data/ablation/conditions/size-constraints/desktop-product-detail/figma-stripped-1920.png new file mode 100644 index 00000000..f84f5b35 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/figma-stripped-1920.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/images/image@2x.png b/data/ablation/conditions/size-constraints/desktop-product-detail/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/images/image@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/images/mapping.json b/data/ablation/conditions/size-constraints/desktop-product-detail/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-2@2x.png b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-2@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-3@2x.png b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape-3@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape@2x.png b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/conditions/size-constraints/desktop-product-detail/images/shape@2x.png differ diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline-expanded.html b/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline-expanded.html new file mode 100644 index 00000000..4e940f7f --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline-expanded.html @@ -0,0 +1,705 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ + +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+ +
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline.html b/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline.html new file mode 100644 index 00000000..97deac01 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/output-baseline.html @@ -0,0 +1,705 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ + +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+ +
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+ Review title +
+
+ Review body +
+
+ +
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped-expanded.html b/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped-expanded.html new file mode 100644 index 00000000..50b5b466 --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped-expanded.html @@ -0,0 +1,503 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
+ +
+ +
+
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ +
+
Button
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+ +
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped.html b/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped.html new file mode 100644 index 00000000..a4907faa --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/output-stripped.html @@ -0,0 +1,503 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
+ +
+ +
+
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ +
+
Button
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+ +
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/conditions/size-constraints/desktop-product-detail/result.json b/data/ablation/conditions/size-constraints/desktop-product-detail/result.json new file mode 100644 index 00000000..dea0796a --- /dev/null +++ b/data/ablation/conditions/size-constraints/desktop-product-detail/result.json @@ -0,0 +1,18 @@ +{ + "fixture": "desktop-product-detail", + "type": "size-constraints", + "baseWidth": 1200, + "expandedWidth": 1920, + "baselineSimilarity": 98, + "strippedSimilarity": 92, + "deltaV": 6, + "baselineTokens": { + "input": 27891, + "output": 18751 + }, + "strippedTokens": { + "input": 27337, + "output": 19485 + }, + "timestamp": "2026-03-28T09:03:36.486Z" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/code-base.png new file mode 100644 index 00000000..72413155 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..c6a333d9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/design-tree.txt @@ -0,0 +1,374 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1606) + style: display: flex; flex-direction: column; align-items: flex-start; background: #2C2C2C /* var:VariableID:3919:36428 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + AI Chatbot (INSTANCE, 1200x1039) [component: Device=Desktop] + component-properties: Device=Desktop + style: display: flex; flex-direction: row; column-gap: 32px /* var:VariableID:346:10902 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + AI Sidebar (INSTANCE, 320x1039) [component: AI Sidebar] + component-properties: Block#6031:7={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; height: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; border-right: 1px solid #D9D9D9 + Block (FRAME, 288x306) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Menu (INSTANCE, 24x24) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Flippy chats (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Flippy chats" + Plus circle (INSTANCE, 24x24) [component: Plus circle] + style: overflow: hidden + Icon (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Search (INSTANCE, 288x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 232x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Block (FRAME, 288x210) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x20) + style: display: flex; flex-direction: column; row-gap: 10px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Chats (TEXT, 288x20) + style: align-self: STRETCH; width: 100%; /* text-style: Body Small Strong */; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Chats" + Block (SLOT, 288x182) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-radius: 8px + Analog Clock React app (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Analog Clock React app" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Simple Design System (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Simple Design System" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Figma variable planning (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Figma variable planning" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + OKCLH token algorithm (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "OKCLH token algorithm" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Component naming advice (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Component naming advice" + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 24x24) [component: Type=Image, Size=Small, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Small, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + flippy@figma.com (TEXT, 248x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "flippy@figma.com" + Block (FRAME, 848x1039) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 0px /* var:VariableID:9:11262 */; background: #FFFBEB /* var:VariableID:2002:7448 */ + AI -> Conversation (INSTANCE, 824x853) [component: AI -> Conversation] + component-properties: Content#6031:9={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Content (SLOT, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 824x34) + style: display: flex; flex-direction: column; row-gap: 10px; align-items: flex-end; align-self: STRETCH; width: 100% + AI Chat -> User message (INSTANCE, 480x34) [component: AI Chat -> User message] + style: display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px 6px 8px /* var:VariableID:364:11163 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Hey Flippy! Write me a script for building an Analag Clock. (TEXT, 464x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Hey Flippy! Write me a script for building an Analag Clock." + AI Chat -> Chat Response (INSTANCE, 560x88) [component: AI Chat -> Chat Response] + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; border-radius: 8px; overflow: hidden + Figma (INSTANCE, 20x20) [component: Figma] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. (TEXT, 532x88) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + AI Chat -> Code Block (INSTANCE, 824x683) [component: AI Chat -> Code Block] + component-properties: Code#6031:8={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Line number (FRAME, 48x683) + style: display: flex; flex-direction: column; align-items: flex-end; align-self: STRETCH; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; height: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-right: 1px solid #D9D9D9; overflow: hidden + 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (TEXT, 20x651) + style: /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Code (SLOT, 776x662) + style: display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-right: 1px solid #D9D9D9; overflow: hidden + import React, { useState, useEffect } from "react"; import { defineProperties } from "figma:react"; export default function AnalogClock({ updateInterval = 1000, secondHandColor = "red", minuteHandColor = "black", hourHandColor = "black", }) { const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); useEffect(() => { const updateClock = () => { // Get London's local time using en-GB format const londonTimeString = new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London", hour12: false }); const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); setTime({ hours: parseInt(hoursStr, 10), minutes: parseInt(minutesStr, 10), seconds: parseInt(secondsStr, 10) }); }; updateClock(); const timerId = setInterval(updateClock, updateInterval); return () => clearInterval(timerId); }, [updateInterval]); (TEXT, 760x630) + style: align-self: STRETCH; width: 100%; /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + AI Chat Box (INSTANCE, 824x114) [component: State=Default] + component-properties: State=Default + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + What would you like to know? (TEXT, 792x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "What would you like to know?" + block (FRAME, 792x36) + style: display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100%; overflow: hidden + Block (FRAME, 124x36) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11658, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Image (INSTANCE, 20x20) [component: Image] + style: overflow: hidden + Icon (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11523, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Code (INSTANCE, 20x20) [component: Code] + style: overflow: hidden + Icon (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12671, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Mic (INSTANCE, 20x20) [component: Mic] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Disabled, Size=Small] + component-properties: Icon#4:192=4039:12446, Variant=Primary, State=Disabled, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #D9D9D9 /* var:VariableID:3919:36448 */; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Arrow up (INSTANCE, 20x20) [component: Arrow up] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/diff-base.png new file mode 100644 index 00000000..e5a4288a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/output.html new file mode 100644 index 00000000..325965b9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/output.html @@ -0,0 +1,616 @@ + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/response.txt new file mode 100644 index 00000000..cb70bd05 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/response.txt @@ -0,0 +1,620 @@ +```html +// filename: index.html + + + + + + Figma AI Chatbot + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
Use cases
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
Explore
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
Resources
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: +- Used placeholder image path "images/shape@2x.png" for the avatar image asset that was referenced but not provided \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/result.json new file mode 100644 index 00000000..25cecd00 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "baseline", + "runIndex": 0, + "similarity": 91, + "inputTokens": 23305, + "outputTokens": 16445, + "totalTokens": 39750, + "htmlBytes": 43346, + "htmlLines": 616, + "cssClassCount": 23, + "cssVariableCount": 21, + "timestamp": "2026-03-28T08:29:54.552Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/code-base.png new file mode 100644 index 00000000..57101e8b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..cf1117f3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/design-tree.txt @@ -0,0 +1,324 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1606) + style: display: flex; flex-direction: column; align-items: flex-start; background: #2C2C2C /* var:VariableID:3919:36428 */; overflow: hidden + Header (INSTANCE, 1200x99) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + AI Chatbot (INSTANCE, 1200x1039) + style: display: flex; flex-direction: row; column-gap: 32px /* var:VariableID:346:10902 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + AI Sidebar (INSTANCE, 320x1039) + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; height: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; border-right: 1px solid #D9D9D9 + Block (FRAME, 288x306) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Menu (INSTANCE, 24x24) + style: overflow: hidden + Icon (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Flippy chats (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Flippy chats" + Plus circle (INSTANCE, 24x24) + style: overflow: hidden + Icon (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Search (INSTANCE, 288x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 232x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Block (FRAME, 288x210) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x20) + style: display: flex; flex-direction: column; row-gap: 10px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Chats (TEXT, 288x20) + style: align-self: STRETCH; width: 100%; /* text-style: Body Small Strong */; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Chats" + Block (SLOT, 288x182) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-radius: 8px + Analog Clock React app (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Analog Clock React app" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Simple Design System (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Simple Design System" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Figma variable planning (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Figma variable planning" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + OKCLH token algorithm (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "OKCLH token algorithm" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Component naming advice (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Component naming advice" + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 24x24) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + flippy@figma.com (TEXT, 248x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "flippy@figma.com" + Block (FRAME, 848x1039) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 0px /* var:VariableID:9:11262 */; background: #FFFBEB /* var:VariableID:2002:7448 */ + AI -> Conversation (INSTANCE, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Content (SLOT, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 824x34) + style: display: flex; flex-direction: column; row-gap: 10px; align-items: flex-end; align-self: STRETCH; width: 100% + AI Chat -> User message (INSTANCE, 480x34) + style: display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px 6px 8px /* var:VariableID:364:11163 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Hey Flippy! Write me a script for building an Analag Clock. (TEXT, 464x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Hey Flippy! Write me a script for building an Analag Clock." + AI Chat -> Chat Response (INSTANCE, 560x88) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; border-radius: 8px; overflow: hidden + Figma (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. (TEXT, 532x88) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + AI Chat -> Code Block (INSTANCE, 824x683) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Line number (FRAME, 48x683) + style: display: flex; flex-direction: column; align-items: flex-end; align-self: STRETCH; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; height: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-right: 1px solid #D9D9D9; overflow: hidden + 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (TEXT, 20x651) + style: /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Code (SLOT, 776x662) + style: display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-right: 1px solid #D9D9D9; overflow: hidden + import React, { useState, useEffect } from "react"; import { defineProperties } from "figma:react"; export default function AnalogClock({ updateInterval = 1000, secondHandColor = "red", minuteHandColor = "black", hourHandColor = "black", }) { const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); useEffect(() => { const updateClock = () => { // Get London's local time using en-GB format const londonTimeString = new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London", hour12: false }); const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); setTime({ hours: parseInt(hoursStr, 10), minutes: parseInt(minutesStr, 10), seconds: parseInt(secondsStr, 10) }); }; updateClock(); const timerId = setInterval(updateClock, updateInterval); return () => clearInterval(timerId); }, [updateInterval]); (TEXT, 760x630) + style: align-self: STRETCH; width: 100%; /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + AI Chat Box (INSTANCE, 824x114) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + What would you like to know? (TEXT, 792x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "What would you like to know?" + block (FRAME, 792x36) + style: display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100%; overflow: hidden + Block (FRAME, 124x36) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Image (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Code (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Mic (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #D9D9D9 /* var:VariableID:3919:36448 */; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Arrow up (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Footer (INSTANCE, 1200x468) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/diff-base.png new file mode 100644 index 00000000..abb3c3a8 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/output.html new file mode 100644 index 00000000..e9560ed3 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/output.html @@ -0,0 +1,389 @@ + + + + + + Figma Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
+
+
+
import React, { useState, useEffect } from "react";
import { defineProperties } from "figma:react";

export default function AnalogClock({
updateInterval = 1000,
secondHandColor = "red",
minuteHandColor = "black",
hourHandColor = "black",
}) {
const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });

useEffect(() => {
const updateClock = () => {
// Get London's local time using en-GB format
const londonTimeString = new Date().toLocaleTimeString("en-GB", {
timeZone: "Europe/London",
hour12: false
});
const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":");
setTime({
hours: parseInt(hoursStr, 10),
minutes: parseInt(minutesStr, 10),
seconds: parseInt(secondsStr, 10)
});
};

updateClock();
const timerId = setInterval(updateClock, updateInterval);
return () => clearInterval(timerId);
}, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+ +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+ +
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+ +
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+ +
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+ +
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/response.txt new file mode 100644 index 00000000..e9fb07f5 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/response.txt @@ -0,0 +1,392 @@ +```html +// filename: index.html + + + + + + Figma Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
+
+
+
import React, { useState, useEffect } from "react";
import { defineProperties } from "figma:react";

export default function AnalogClock({
updateInterval = 1000,
secondHandColor = "red",
minuteHandColor = "black",
hourHandColor = "black",
}) {
const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });

useEffect(() => {
const updateClock = () => {
// Get London's local time using en-GB format
const londonTimeString = new Date().toLocaleTimeString("en-GB", {
timeZone: "Europe/London",
hour12: false
});
const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":");
setTime({
hours: parseInt(hoursStr, 10),
minutes: parseInt(minutesStr, 10),
seconds: parseInt(secondsStr, 10)
});
};

updateClock();
const timerId = setInterval(updateClock, updateInterval);
return () => clearInterval(timerId);
}, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+ +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+ +
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+ +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+ +
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+ +
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+ +
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/result.json new file mode 100644 index 00000000..0f6fd901 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "component-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 21544, + "outputTokens": 16839, + "totalTokens": 38383, + "htmlBytes": 43841, + "htmlLines": 389, + "cssClassCount": 8, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:02:56.322Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..08f8394c Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..6661b8e7 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,337 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1606) + style: background: #2C2C2C /* var:VariableID:3919:36428 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: flex-grow: 1 + Slot (SLOT, 553x32) + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: flex-grow: 1; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + AI Chatbot (INSTANCE, 1200x1039) [component: Device=Desktop] + component-properties: Device=Desktop + style: width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + AI Sidebar (INSTANCE, 320x1039) [component: AI Sidebar] + component-properties: Block#6031:7={"guid":{"sessionID":-1,"localID":-1}} + style: height: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; border-right: 1px solid #D9D9D9 + Block (FRAME, 288x306) + style: width: 100% + Block (FRAME, 288x24) + style: width: 100% + Menu (INSTANCE, 24x24) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Flippy chats (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Flippy chats" + Plus circle (INSTANCE, 24x24) [component: Plus circle] + style: overflow: hidden + Icon (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Search (INSTANCE, 288x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 232x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Block (FRAME, 288x210) + style: width: 100% + Block (FRAME, 288x20) + style: width: 100% + Chats (TEXT, 288x20) + style: width: 100%; /* text-style: Body Small Strong */; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Chats" + Block (SLOT, 288x182) + style: width: 100% + Block (FRAME, 288x30) + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-radius: 8px + Analog Clock React app (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Analog Clock React app" + Block (FRAME, 288x30) + style: width: 100%; border-radius: 8px + Simple Design System (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Simple Design System" + Block (FRAME, 288x30) + style: width: 100%; border-radius: 8px + Figma variable planning (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Figma variable planning" + Block (FRAME, 288x30) + style: width: 100%; border-radius: 8px + OKCLH token algorithm (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "OKCLH token algorithm" + Block (FRAME, 288x30) + style: width: 100%; border-radius: 8px + Component naming advice (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Component naming advice" + Block (FRAME, 288x24) + style: width: 100% + Avatar (INSTANCE, 24x24) [component: Type=Image, Size=Small, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Small, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + flippy@figma.com (TEXT, 248x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "flippy@figma.com" + Block (FRAME, 848x1039) + style: flex-grow: 1; background: #FFFBEB /* var:VariableID:2002:7448 */ + AI -> Conversation (INSTANCE, 824x853) [component: AI -> Conversation] + component-properties: Content#6031:9={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100% + Content (SLOT, 824x853) + style: width: 100% + Block (FRAME, 824x34) + style: width: 100% + AI Chat -> User message (INSTANCE, 480x34) [component: AI Chat -> User message] + style: background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Hey Flippy! Write me a script for building an Analag Clock. (TEXT, 464x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Hey Flippy! Write me a script for building an Analag Clock." + AI Chat -> Chat Response (INSTANCE, 560x88) [component: AI Chat -> Chat Response] + style: border-radius: 8px; overflow: hidden + Figma (INSTANCE, 20x20) [component: Figma] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. (TEXT, 532x88) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + AI Chat -> Code Block (INSTANCE, 824x683) [component: AI Chat -> Code Block] + component-properties: Code#6031:8={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Line number (FRAME, 48x683) + style: height: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-right: 1px solid #D9D9D9; overflow: hidden + 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (TEXT, 20x651) + style: /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Code (SLOT, 776x662) + style: flex-grow: 1; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-right: 1px solid #D9D9D9; overflow: hidden + import React, { useState, useEffect } from "react"; import { defineProperties } from "figma:react"; export default function AnalogClock({ updateInterval = 1000, secondHandColor = "red", minuteHandColor = "black", hourHandColor = "black", }) { const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); useEffect(() => { const updateClock = () => { // Get London's local time using en-GB format const londonTimeString = new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London", hour12: false }); const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); setTime({ hours: parseInt(hoursStr, 10), minutes: parseInt(minutesStr, 10), seconds: parseInt(secondsStr, 10) }); }; updateClock(); const timerId = setInterval(updateClock, updateInterval); return () => clearInterval(timerId); }, [updateInterval]); (TEXT, 760x630) + style: width: 100%; /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + AI Chat Box (INSTANCE, 824x114) [component: State=Default] + component-properties: State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + What would you like to know? (TEXT, 792x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "What would you like to know?" + block (FRAME, 792x36) + style: width: 100%; overflow: hidden + Block (FRAME, 124x36) + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11658, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Image (INSTANCE, 20x20) [component: Image] + style: overflow: hidden + Icon (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11523, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Code (INSTANCE, 20x20) [component: Code] + style: overflow: hidden + Icon (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12671, Variant=Subtle, State=Default, Size=Small + style: border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Mic (INSTANCE, 20x20) [component: Mic] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Disabled, Size=Small] + component-properties: Icon#4:192=4039:12446, Variant=Primary, State=Disabled, Size=Small + style: background: #D9D9D9 /* var:VariableID:3919:36448 */; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Arrow up (INSTANCE, 20x20) [component: Arrow up] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..91b29cd4 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..65b06960 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/output.html @@ -0,0 +1,393 @@ + + + + + + Figma Platform + + + + +
+ +
+ +
+ + + +
+ + +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ + +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ Flippy chats +
+ + + +
+
+ + +
+ Search +
+ + + +
+
+ + +
+ Chats +
+
+ Analog Clock React app +
+
+ Simple Design System +
+
+ Figma variable planning +
+
+ OKCLH token algorithm +
+
+ Component naming advice +
+
+
+
+ + +
+
+ +
+ flippy@figma.com +
+
+ + +
+ +
+ +
+ Hey Flippy! Write me a script for building an Analag Clock. +
+ + +
+
+ + + +
+ Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. +
+ + +
+ +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
+
+ + +
+
import React, { useState, useEffect } from "react";
import { defineProperties } from "figma:react";

export default function AnalogClock({
updateInterval = 1000,
secondHandColor = "red",
minuteHandColor = "black",
hourHandColor = "black",
}) {
const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });

useEffect(() => {
const updateClock = () => {
// Get London's local time using en-GB format
const londonTimeString = new Date().toLocaleTimeString("en-GB", {
timeZone: "Europe/London",
hour12: false
});
const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":");
setTime({
hours: parseInt(hoursStr, 10),
minutes: parseInt(minutesStr, 10),
seconds: parseInt(secondsStr, 10)
});
};

updateClock();
const timerId = setInterval(updateClock, updateInterval);
return () => clearInterval(timerId);
}, [updateInterval]);
+
+
+
+ + +
+ What would you like to know? +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + + +
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+ UI design + UX design + Wireframing + Diagramming + Brainstorming + Online whiteboard + Team collaboration +
+
+ + +
+
+ Explore +
+
+ Design + Prototyping + Development features + Design systems + Collaboration features + Design process + FigJam +
+
+ + +
+
+ Resources +
+
+ Blog + Best practices + Colors + Color wheel + Support + Developers + Resource library +
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..dae6609d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,400 @@ +```html +// filename: index.html + + + + + + Figma Platform + + + + +
+ +
+ +
+ + + +
+ + +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ + +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+ +
+ +
+ +
+
+ + + +
+ Flippy chats +
+ + + +
+
+ + +
+ Search +
+ + + +
+
+ + +
+ Chats +
+
+ Analog Clock React app +
+
+ Simple Design System +
+
+ Figma variable planning +
+
+ OKCLH token algorithm +
+
+ Component naming advice +
+
+
+
+ + +
+
+ +
+ flippy@figma.com +
+
+ + +
+ +
+ +
+ Hey Flippy! Write me a script for building an Analag Clock. +
+ + +
+
+ + + +
+ Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. +
+ + +
+ +
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
+
+ + +
+
import React, { useState, useEffect } from "react";
import { defineProperties } from "figma:react";

export default function AnalogClock({
updateInterval = 1000,
secondHandColor = "red",
minuteHandColor = "black",
hourHandColor = "black",
}) {
const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });

useEffect(() => {
const updateClock = () => {
// Get London's local time using en-GB format
const londonTimeString = new Date().toLocaleTimeString("en-GB", {
timeZone: "Europe/London",
hour12: false
});
const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":");
setTime({
hours: parseInt(hoursStr, 10),
minutes: parseInt(minutesStr, 10),
seconds: parseInt(secondsStr, 10)
});
};

updateClock();
const timerId = setInterval(updateClock, updateInterval);
return () => clearInterval(timerId);
}, [updateInterval]);
+
+
+
+ + +
+ What would you like to know? +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + + +
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+ UI design + UX design + Wireframing + Diagramming + Brainstorming + Online whiteboard + Team collaboration +
+
+ + +
+
+ Explore +
+
+ Design + Prototyping + Development features + Design systems + Collaboration features + Design process + FigJam +
+
+ + +
+
+ Resources +
+
+ Blog + Best practices + Colors + Color wheel + Support + Developers + Resource library +
+
+
+
+
+ + +``` + +// interpretations: +- Used placeholder image path "images/shape@2x.png" for the avatar image asset +- Applied flexbox layout for component positioning where exact positioning wasn't specified in the design tree +- Used standard padding values for internal spacing of components where not explicitly defined +- Simplified some nested frame structures into more semantic HTML while maintaining visual hierarchy \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..11b63a7f --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 96, + "inputTokens": 19371, + "outputTokens": 13950, + "totalTokens": 33321, + "htmlBytes": 34183, + "htmlLines": 393, + "cssClassCount": 14, + "cssVariableCount": 17, + "timestamp": "2026-03-28T09:59:44.838Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..d2d03858 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..672f1630 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,374 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 1200x1606) + style: display: flex; flex-direction: column; align-items: flex-start; background: #2C2C2C /* var:VariableID:3919:36428 */; overflow: hidden + Node2 (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Node7 (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node8 (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node9 (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Node10 (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node11 (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Node12 (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node13 (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Node14 (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node15 (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node16 (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node17 (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Node18 (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Node20 (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Node21 (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node22 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Node23 (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node24 (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Node25 (INSTANCE, 1200x1039) [component: Device=Desktop] + component-properties: Device=Desktop + style: display: flex; flex-direction: row; column-gap: 32px /* var:VariableID:346:10902 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + Node26 (INSTANCE, 320x1039) [component: AI Sidebar] + component-properties: Block#6031:7={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; height: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; border-right: 1px solid #D9D9D9 + Node27 (FRAME, 288x306) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node28 (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Node29 (INSTANCE, 24x24) [component: Menu] + style: overflow: hidden + Node30 (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Node31 (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Flippy chats" + Node32 (INSTANCE, 24x24) [component: Plus circle] + style: overflow: hidden + Node33 (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Node34 (INSTANCE, 288x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Node35 (TEXT, 232x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Node36 (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Node37 (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node38 (FRAME, 288x210) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node39 (FRAME, 288x20) + style: display: flex; flex-direction: column; row-gap: 10px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node40 (TEXT, 288x20) + style: align-self: STRETCH; width: 100%; /* text-style: Body Small Strong */; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Chats" + Node41 (SLOT, 288x182) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node42 (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-radius: 8px + Node43 (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Analog Clock React app" + Node44 (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Node45 (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Simple Design System" + Node46 (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Node47 (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Figma variable planning" + Node48 (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Node49 (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "OKCLH token algorithm" + Node50 (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Node51 (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Component naming advice" + Node52 (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Node53 (INSTANCE, 24x24) [component: Type=Image, Size=Small, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Small, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node54 (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + Node55 (TEXT, 248x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "flippy@figma.com" + Node56 (FRAME, 848x1039) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 0px /* var:VariableID:9:11262 */; background: #FFFBEB /* var:VariableID:2002:7448 */ + Node57 (INSTANCE, 824x853) [component: AI -> Conversation] + component-properties: Content#6031:9={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node58 (SLOT, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Node59 (FRAME, 824x34) + style: display: flex; flex-direction: column; row-gap: 10px; align-items: flex-end; align-self: STRETCH; width: 100% + Node60 (INSTANCE, 480x34) [component: AI Chat -> User message] + style: display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px 6px 8px /* var:VariableID:364:11163 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Node61 (TEXT, 464x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Hey Flippy! Write me a script for building an Analag Clock." + Node62 (INSTANCE, 560x88) [component: AI Chat -> Chat Response] + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; border-radius: 8px; overflow: hidden + Node63 (INSTANCE, 20x20) [component: Figma] + style: overflow: hidden + Node64 (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Node65 (TEXT, 532x88) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + Node66 (INSTANCE, 824x683) [component: AI Chat -> Code Block] + component-properties: Code#6031:8={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Node67 (FRAME, 48x683) + style: display: flex; flex-direction: column; align-items: flex-end; align-self: STRETCH; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; height: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-right: 1px solid #D9D9D9; overflow: hidden + Node68 (TEXT, 20x651) + style: /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Node69 (SLOT, 776x662) + style: display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-right: 1px solid #D9D9D9; overflow: hidden + Node70 (TEXT, 760x630) + style: align-self: STRETCH; width: 100%; /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + Node71 (INSTANCE, 824x114) [component: State=Default] + component-properties: State=Default + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + Node72 (TEXT, 792x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "What would you like to know?" + Node73 (FRAME, 792x36) + style: display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100%; overflow: hidden + Node74 (FRAME, 124x36) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node75 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11658, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node76 (INSTANCE, 20x20) [component: Image] + style: overflow: hidden + Node77 (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Node78 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11523, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node79 (INSTANCE, 20x20) [component: Code] + style: overflow: hidden + Node80 (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Node81 (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12671, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Node82 (INSTANCE, 20x20) [component: Mic] + style: overflow: hidden + Node83 (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Node84 (INSTANCE, 36x36) [component: Variant=Primary, State=Disabled, Size=Small] + component-properties: Icon#4:192=4039:12446, Variant=Primary, State=Disabled, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #D9D9D9 /* var:VariableID:3919:36448 */; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Node85 (INSTANCE, 20x20) [component: Arrow up] + style: overflow: hidden + Node86 (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Node87 (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Node88 (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node89 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node90 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node91 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node92 (FRAME, 24x24) + Node93 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node94 (FRAME, 24x24) + style: overflow: hidden + Node95 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node96 (FRAME, 24x24) + style: overflow: hidden + Node97 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node98 (FRAME, 24x24) + style: overflow: hidden + Node99 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node100 (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node101 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node102 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node103 (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node104 (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node105 (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node106 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node107 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node108 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node109 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node110 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node111 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node112 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node113 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node114 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node115 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node116 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node117 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node118 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node119 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node120 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node121 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node122 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node123 (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node124 (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node125 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node126 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node127 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node128 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node129 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node130 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node131 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node132 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node133 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node134 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node135 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node136 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node137 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node138 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node139 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node140 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node141 (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node142 (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node143 (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node144 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node145 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node146 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node147 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node148 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node149 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node150 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node151 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node152 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node153 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node154 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node155 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node156 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node157 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..babaa6f5 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..1e60f70c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/output.html @@ -0,0 +1,457 @@ + + + + + + Figma Interface + + + + +
+ +
+ +
+
+ + + +
+
+ + +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+ +
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ + +
+
Search
+
+ + + +
+
+ + +
+
+
Chats
+
+
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ + +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+ +
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ + +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ + +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..ca4a040c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,462 @@ +```html +// filename: index.html + + + + + + Figma Interface + + + + +
+ +
+ +
+
+ + + +
+
+ + +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+ +
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ + +
+
Search
+
+ + + +
+
+ + +
+
+
Chats
+
+
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ + +
+
+ +
+
flippy@figma.com
+
+
+ + +
+ +
+
+ +
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ + +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ + +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ + +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ + +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ + +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: +- Added CSS variable --color-CDCDCD for hover state background color (referenced but not defined in design tree) +- Used placeholder image path "images/shape@2x.png" for user avatar as actual image asset was not provided \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..565ad7d2 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 97, + "inputTokens": 23052, + "outputTokens": 17346, + "totalTokens": 40398, + "htmlBytes": 45309, + "htmlLines": 457, + "cssClassCount": 8, + "cssVariableCount": 15, + "timestamp": "2026-03-28T10:06:13.301Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/code-base.png new file mode 100644 index 00000000..fa0747d3 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..e25fafdd --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/design-tree.txt @@ -0,0 +1,374 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1606) + style: display: flex; flex-direction: column; align-items: flex-start; background: #2C2C2C /* var:VariableID:3919:36428 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + AI Chatbot (INSTANCE, 1200x1039) [component: Device=Desktop] + component-properties: Device=Desktop + style: display: flex; flex-direction: row; column-gap: 32px /* var:VariableID:346:10902 */; align-items: flex-start; align-self: STRETCH; width: 100%; background: #F5F5F5 /* var:VariableID:3919:36424 */; min-width: 1200px; max-width: 1920px + AI Sidebar (INSTANCE, 320x1039) [component: AI Sidebar] + component-properties: Block#6031:7={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; height: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; border-right: 1px solid #D9D9D9 + Block (FRAME, 288x306) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Menu (INSTANCE, 24x24) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Flippy chats (TEXT, 208x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Flippy chats" + Plus circle (INSTANCE, 24x24) [component: Plus circle] + style: overflow: hidden + Icon (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Search (INSTANCE, 288x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 232x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Block (FRAME, 288x210) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x20) + style: display: flex; flex-direction: column; row-gap: 10px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Chats (TEXT, 288x20) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Chats" + Block (SLOT, 288x182) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-radius: 8px + Analog Clock React app (TEXT, 276x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Analog Clock React app" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Simple Design System (TEXT, 276x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Simple Design System" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Figma variable planning (TEXT, 276x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Figma variable planning" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + OKCLH token algorithm (TEXT, 276x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "OKCLH token algorithm" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px /* var:VariableID:9:11258 */; width: 100%; border-radius: 8px + Component naming advice (TEXT, 276x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Component naming advice" + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 24x24) [component: Type=Image, Size=Small, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Small, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + flippy@figma.com (TEXT, 248x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "flippy@figma.com" + Block (FRAME, 848x1039) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 0px /* var:VariableID:9:11262 */; background: #FFFBEB /* var:VariableID:2002:7448 */ + AI -> Conversation (INSTANCE, 824x853) [component: AI -> Conversation] + component-properties: Content#6031:9={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; width: 100% + Content (SLOT, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 824x34) + style: display: flex; flex-direction: column; row-gap: 10px; align-items: flex-end; align-self: STRETCH; width: 100% + AI Chat -> User message (INSTANCE, 480x34) [component: AI Chat -> User message] + style: display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px 6px 8px /* var:VariableID:364:11163 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Hey Flippy! Write me a script for building an Analag Clock. (TEXT, 464x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Hey Flippy! Write me a script for building an Analag Clock." + AI Chat -> Chat Response (INSTANCE, 560x88) [component: AI Chat -> Chat Response] + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; border-radius: 8px; overflow: hidden + Figma (INSTANCE, 20x20) [component: Figma] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. (TEXT, 532x88) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + AI Chat -> Code Block (INSTANCE, 824x683) [component: AI Chat -> Code Block] + component-properties: Code#6031:8={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Line number (FRAME, 48x683) + style: display: flex; flex-direction: column; align-items: flex-end; align-self: STRETCH; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; height: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-right: 1px solid #D9D9D9; overflow: hidden + 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (TEXT, 20x651) + style: font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Code (SLOT, 776x662) + style: display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; padding: 16px 8px 16px 8px /* var:VariableID:9:11261 */; background: #F5F5F5 /* var:VariableID:3919:36424 */; border-right: 1px solid #D9D9D9; overflow: hidden + import React, { useState, useEffect } from "react"; import { defineProperties } from "figma:react"; export default function AnalogClock({ updateInterval = 1000, secondHandColor = "red", minuteHandColor = "black", hourHandColor = "black", }) { const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); useEffect(() => { const updateClock = () => { // Get London's local time using en-GB format const londonTimeString = new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London", hour12: false }); const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); setTime({ hours: parseInt(hoursStr, 10), minutes: parseInt(minutesStr, 10), seconds: parseInt(secondsStr, 10) }); }; updateClock(); const timerId = setInterval(updateClock, updateInterval); return () => clearInterval(timerId); }, [updateInterval]); (TEXT, 760x630) + style: align-self: STRETCH; width: 100%; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + AI Chat Box (INSTANCE, 824x114) [component: State=Default] + component-properties: State=Default + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11261 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + What would you like to know? (TEXT, 792x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "What would you like to know?" + block (FRAME, 792x36) + style: display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100%; overflow: hidden + Block (FRAME, 124x36) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11658, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Image (INSTANCE, 20x20) [component: Image] + style: overflow: hidden + Icon (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11523, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Code (INSTANCE, 20x20) [component: Code] + style: overflow: hidden + Icon (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12671, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Mic (INSTANCE, 20x20) [component: Mic] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Disabled, Size=Small] + component-properties: Icon#4:192=4039:12446, Variant=Primary, State=Disabled, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #D9D9D9 /* var:VariableID:3919:36448 */; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Arrow up (INSTANCE, 20x20) [component: Arrow up] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/diff-base.png new file mode 100644 index 00000000..234e9a99 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/output.html new file mode 100644 index 00000000..c1f08ad8 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/output.html @@ -0,0 +1,580 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/response.txt new file mode 100644 index 00000000..cfd755fb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/response.txt @@ -0,0 +1,584 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+ +
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: +- Used placeholder image path "images/shape@2x.png" for the avatar image asset that was referenced but not provided \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/result.json new file mode 100644 index 00000000..7c834876 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "style-references", + "runIndex": 0, + "similarity": 96, + "inputTokens": 22863, + "outputTokens": 18547, + "totalTokens": 41410, + "htmlBytes": 47914, + "htmlLines": 580, + "cssClassCount": 18, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:12:56.511Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/code-base.png new file mode 100644 index 00000000..48b1902a Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..4f82b612 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/design-tree.txt @@ -0,0 +1,374 @@ +# Design Tree +# Root: 1200px x 1606px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x1606) + style: display: flex; flex-direction: column; align-items: flex-start; background: #2C2C2C; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Register" + AI Chatbot (INSTANCE, 1200x1039) [component: Device=Desktop] + component-properties: Device=Desktop + style: display: flex; flex-direction: row; column-gap: 32px; align-items: flex-start; align-self: STRETCH; width: 100%; background: #F5F5F5; min-width: 1200px; max-width: 1920px + AI Sidebar (INSTANCE, 320x1039) [component: AI Sidebar] + component-properties: Block#6031:7={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; justify-content: space-between; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; height: 100%; background: #FFF1C2; border-right: 1px solid #D9D9D9 + Block (FRAME, 288x306) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; width: 100% + Menu (INSTANCE, 24x24) [component: Menu] + style: overflow: hidden + Icon (VECTOR, 18x12) + style: border: 2.5px solid #1E1E1E; svg: + Flippy chats (TEXT, 208x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Flippy chats" + Plus circle (INSTANCE, 24x24) [component: Plus circle] + style: overflow: hidden + Icon (VECTOR, 20x20) + style: border: 2.5px solid #1E1E1E; svg: + Search (INSTANCE, 288x40) [component: State=Default, Value Type=Placeholder] + component-properties: Value#29:2=Search, State=Default, Value Type=Placeholder + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 9999px; overflow: hidden; min-width: 120px + Value (TEXT, 232x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #B3B3B3; text: "Search" + Search (INSTANCE, 16x16) [component: Search] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Block (FRAME, 288x210) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x20) + style: display: flex; flex-direction: column; row-gap: 10px; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Chats (TEXT, 288x20) + style: align-self: STRETCH; width: 100%; /* text-style: Body Small Strong */; font-family: "Inter"; font-weight: 600; font-size: 14px; line-height: 19.6px; text-align: left; color: #757575; text: "Chats" + Block (SLOT, 288x182) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px; width: 100%; background: #FFFFFF; border-radius: 8px + Analog Clock React app (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Analog Clock React app" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px; width: 100%; border-radius: 8px + Simple Design System (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Simple Design System" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px; width: 100%; border-radius: 8px + Figma variable planning (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Figma variable planning" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px; width: 100%; border-radius: 8px + OKCLH token algorithm (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "OKCLH token algorithm" + Block (FRAME, 288x30) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; padding: 4px 6px 4px 6px; width: 100%; border-radius: 8px + Component naming advice (TEXT, 276x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Component naming advice" + Block (FRAME, 288x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 24x24) [component: Type=Image, Size=Small, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Small, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 24x24) + style: content-image: url(images/shape@2x.png); object-fit: cover + flippy@figma.com (TEXT, 248x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "flippy@figma.com" + Block (FRAME, 848x1039) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 0px; background: #FFFBEB + AI -> Conversation (INSTANCE, 824x853) [component: AI -> Conversation] + component-properties: Content#6031:9={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Content (SLOT, 824x853) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; width: 100% + Block (FRAME, 824x34) + style: display: flex; flex-direction: column; row-gap: 10px; align-items: flex-end; align-self: STRETCH; width: 100% + AI Chat -> User message (INSTANCE, 480x34) [component: AI Chat -> User message] + style: display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px 6px 8px; background: #F5F5F5; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden + Hey Flippy! Write me a script for building an Analag Clock. (TEXT, 464x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Hey Flippy! Write me a script for building an Analag Clock." + AI Chat -> Chat Response (INSTANCE, 560x88) [component: AI Chat -> Chat Response] + style: display: flex; flex-direction: row; column-gap: 8px; align-items: flex-start; border-radius: 8px; overflow: hidden + Figma (INSTANCE, 20x20) [component: Figma] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code. (TEXT, 532x88) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code." + AI Chat -> Code Block (INSTANCE, 824x683) [component: AI Chat -> Code Block] + component-properties: Code#6031:8={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100%; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden + Line number (FRAME, 48x683) + style: display: flex; flex-direction: column; align-items: flex-end; align-self: STRETCH; padding: 16px 8px 16px 8px; height: 100%; background: #FFFFFF; border-right: 1px solid #D9D9D9; overflow: hidden + 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 (TEXT, 20x651) + style: /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: right; color: #B3B3B3; text: "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31" + Code (SLOT, 776x662) + style: display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; padding: 16px 8px 16px 8px; background: #F5F5F5; border-right: 1px solid #D9D9D9; overflow: hidden + import React, { useState, useEffect } from "react"; import { defineProperties } from "figma:react"; export default function AnalogClock({ updateInterval = 1000, secondHandColor = "red", minuteHandColor = "black", hourHandColor = "black", }) { const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); useEffect(() => { const updateClock = () => { // Get London's local time using en-GB format const londonTimeString = new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London", hour12: false }); const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); setTime({ hours: parseInt(hoursStr, 10), minutes: parseInt(minutesStr, 10), seconds: parseInt(secondsStr, 10) }); }; updateClock(); const timerId = setInterval(updateClock, updateInterval); return () => clearInterval(timerId); }, [updateInterval]); (TEXT, 760x630) + style: align-self: STRETCH; width: 100%; /* text-style: Body Code */; font-family: "Roboto Mono"; font-weight: 400; font-size: 16px; line-height: 20.8px; text-align: left; color: #ABB2BF; text: "import React, { useState, useEffect } from \"react\";\nimport { defineProperties } from \"figma:react\";\n\nexport default function AnalogClock({ \n updateInterval = 1000,\n secondHandColor = \"red\", \n minuteHandColor = \"black\", \n hourHandColor = \"black\", \n}) {\n const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });\n\n useEffect(() => {\n const updateClock = () => {\n // Get London's local time using en-GB format\n const londonTimeString = new Date().toLocaleTimeString(\"en-GB\", {\n timeZone: \"Europe/London\",\n hour12: false\n });\n const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(\":\");\n setTime({\n hours: parseInt(hoursStr, 10),\n minutes: parseInt(minutesStr, 10),\n seconds: parseInt(secondsStr, 10)\n });\n };\n\n updateClock();\n const timerId = setInterval(updateClock, updateInterval);\n return () => clearInterval(timerId);\n }, [updateInterval]);" + AI Chat Box (INSTANCE, 824x114) [component: State=Default] + component-properties: State=Default + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 16px; overflow: hidden; min-width: 240px; min-height: 80px + What would you like to know? (TEXT, 792x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3; text: "What would you like to know?" + block (FRAME, 792x36) + style: display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; align-self: STRETCH; width: 100%; overflow: hidden + Block (FRAME, 124x36) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11658, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Image (INSTANCE, 20x20) [component: Image] + style: overflow: hidden + Icon (VECTOR, 15x15) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:11523, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Code (INSTANCE, 20x20) [component: Code] + style: overflow: hidden + Icon (VECTOR, 17x10) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Subtle, State=Default, Size=Small] + component-properties: Icon#4:192=4039:12671, Variant=Subtle, State=Default, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 32px; overflow: hidden + [hover]: background: #F5F5F5 /* var:VariableID:3919:36426 */ + Mic (INSTANCE, 20x20) [component: Mic] + style: overflow: hidden + Icon (VECTOR, 12x18) + style: border: 2px solid #1E1E1E; svg: + Icon Button (INSTANCE, 36x36) [component: Variant=Primary, State=Disabled, Size=Small] + component-properties: Icon#4:192=4039:12446, Variant=Primary, State=Disabled, Size=Small + style: display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #D9D9D9; border: 1px solid #B3B3B3; border-radius: 32px; overflow: hidden + Arrow up (INSTANCE, 20x20) [component: Arrow up] + style: overflow: hidden + Icon (VECTOR, 12x12) + style: border: 2px solid #B3B3B3; svg: + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..97f4262f Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..61ec04a7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..28a80f1e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/mapping.json @@ -0,0 +1,3 @@ +{ + "I4331:6949;4317:11326;4317:11271;9762:1118": "shape@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/output.html new file mode 100644 index 00000000..f99c42ca --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/output.html @@ -0,0 +1,557 @@ + + + + + + Figma Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/response.txt new file mode 100644 index 00000000..19e2e1b6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/response.txt @@ -0,0 +1,560 @@ +```html +// filename: index.html + + + + + + Figma Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
+
+
+ + + +
+
Flippy chats
+
+ + + +
+
+ +
+
Search
+
+ + + +
+
+ +
+
+
Chats
+
+
+
+
Analog Clock React app
+
+
+
Simple Design System
+
+
+
Figma variable planning
+
+
+
OKCLH token algorithm
+
+
+
Component naming advice
+
+
+
+
+ +
+
+ +
+
flippy@figma.com
+
+
+ + +
+
+
+
+
+
Hey Flippy! Write me a script for building an Analag Clock.
+
+
+ +
+
+ + + +
+
Sure. Here is a Typescript code block for your Analog Clock project. It is built using React, and uses the local time for London, England as standard. Let me know if you would like to make any refinements to the code.
+
+ +
+
+
1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31
+
+
+
import React, { useState, useEffect } from "react"; +import { defineProperties } from "figma:react"; + +export default function AnalogClock({ + updateInterval = 1000, + secondHandColor = "red", + minuteHandColor = "black", + hourHandColor = "black", +}) { + const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 }); + + useEffect(() => { + const updateClock = () => { + // Get London's local time using en-GB format + const londonTimeString = new Date().toLocaleTimeString("en-GB", { + timeZone: "Europe/London", + hour12: false + }); + const [hoursStr, minutesStr, secondsStr] = londonTimeString.split(":"); + setTime({ + hours: parseInt(hoursStr, 10), + minutes: parseInt(minutesStr, 10), + seconds: parseInt(secondsStr, 10) + }); + }; + + updateClock(); + const timerId = setInterval(updateClock, updateInterval); + return () => clearInterval(timerId); + }, [updateInterval]);
+
+
+
+
+ +
+
What would you like to know?
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/result.json new file mode 100644 index 00000000..ce3c00d6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-ai-chat/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-ai-chat", + "type": "variable-references", + "runIndex": 0, + "similarity": 96, + "inputTokens": 21407, + "outputTokens": 17137, + "totalTokens": 38544, + "htmlBytes": 44512, + "htmlLines": 557, + "cssClassCount": 19, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:09:30.267Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/code-base.png new file mode 100644 index 00000000..b2f6bb46 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..ac1cb873 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/design-tree.txt @@ -0,0 +1,370 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2120) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Image (INSTANCE, 1200x524) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 1200x478) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; min-width: 1200px; max-width: 1920px + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 1200x551) [component: Platform=Desktop] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 1072x314) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/diff-base.png new file mode 100644 index 00000000..72f74bc7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/output.html new file mode 100644 index 00000000..e14e9690 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/output.html @@ -0,0 +1,454 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/response.txt new file mode 100644 index 00000000..bd68fa14 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/response.txt @@ -0,0 +1,457 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/result.json new file mode 100644 index 00000000..940bf41c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "baseline", + "runIndex": 0, + "similarity": 99, + "inputTokens": 22076, + "outputTokens": 14403, + "totalTokens": 36479, + "htmlBytes": 38420, + "htmlLines": 454, + "cssClassCount": 18, + "cssVariableCount": 14, + "timestamp": "2026-03-28T08:39:01.879Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/code-base.png new file mode 100644 index 00000000..405cecd7 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..7a87a383 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/design-tree.txt @@ -0,0 +1,317 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2120) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Image (INSTANCE, 1200x524) + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 1200x478) + style: display: flex; flex-direction: row; column-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; min-width: 1200px; max-width: 1920px + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 1200x551) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 1072x314) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 1200x468) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/diff-base.png new file mode 100644 index 00000000..ad4304f9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/output.html new file mode 100644 index 00000000..2c8fa043 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/output.html @@ -0,0 +1,405 @@ + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+ +
+ +
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
Title
+
Subtitle
+
+ + +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+ +
+
Heading
+
Subheading
+
+ + +
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/response.txt new file mode 100644 index 00000000..08d2f4cf --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/response.txt @@ -0,0 +1,408 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+ +
+ +
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
Title
+
Subtitle
+
+ + +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+ +
+
Heading
+
Subheading
+
+ + +
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/result.json new file mode 100644 index 00000000..6249295b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 19549, + "outputTokens": 15997, + "totalTokens": 35546, + "htmlBytes": 43376, + "htmlLines": 405, + "cssClassCount": 9, + "cssVariableCount": 22, + "timestamp": "2026-03-28T09:49:03.549Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..92222a22 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..74bf05d2 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,331 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2120) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: flex-grow: 1 + Slot (SLOT, 553x32) + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: flex-grow: 1; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Image (INSTANCE, 1200x524) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + Title (TEXT, 151x86) + style: width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 151x38) + style: width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 1200x478) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; min-width: 1200px; max-width: 1920px + Image (FRAME, 512x350) + style: flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 512x350) + style: flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 1200x551) [component: Platform=Desktop] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + Heading (TEXT, 113x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 1072x314) + style: width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: width: 100% + Title (TEXT, 244x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..f6fcd529 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..ef5b130c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/output.html @@ -0,0 +1,455 @@ + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+ +
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
Title
+
Subtitle
+
+ + +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+ +
+
Heading
+
Subheading
+
+ + +
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+ +
+ +
+ + + +
+ + +
+ +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+
+
+ + +
+ +
+ +
+
Use cases
+
+ + +
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+ +
+
Explore
+
+ + +
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+ +
+
Resources
+
+ + +
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..f2a3ef70 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,462 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+ +
+ +
+ + + + +
+
+ + +
+ +
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ + +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+ +
+
Title
+
Subtitle
+
+ + +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+ +
+
Heading
+
Subheading
+
+ + +
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ + +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+ +
+ +
+ + + +
+ + +
+ +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+
+
+ + +
+ +
+ +
+
Use cases
+
+ + +
+
UI design
+
UX design
+
Wireframing
+
Diagramming
+
Brainstorming
+
Online whiteboard
+
Team collaboration
+
+
+ + +
+ +
+
Explore
+
+ + +
+
Design
+
Prototyping
+
Development features
+
Design systems
+
Collaboration features
+
Design process
+
FigJam
+
+
+ + +
+ +
+
Resources
+
+ + +
+
Blog
+
Best practices
+
Colors
+
Color wheel
+
Support
+
Developers
+
Resource library
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for navigation pills, button groups, cards, and footer sections to achieve proper spacing and alignment +- Added padding to sections for proper content positioning within the colored backgrounds +- Used margin-bottom for footer link list titles to create proper spacing between title and links +- Applied cursor: pointer to buttons for better user interaction feedback \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..9354d68d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 93, + "inputTokens": 18130, + "outputTokens": 12828, + "totalTokens": 30958, + "htmlBytes": 32759, + "htmlLines": 455, + "cssClassCount": 20, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:46:14.669Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..f52c3250 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..540c2f4f --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,370 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 1200x2120) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Node7 (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node8 (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node9 (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Node10 (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node11 (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Node12 (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node13 (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Node14 (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node15 (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node16 (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node17 (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Node18 (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Node20 (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Node21 (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node22 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Node23 (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node24 (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Node25 (INSTANCE, 1200x524) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Node26 (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node27 (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Node28 (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Node29 (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Node30 (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node31 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Node32 (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node33 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node34 (INSTANCE, 1200x478) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; min-width: 1200px; max-width: 1920px + Node35 (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node36 (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Node37 (INSTANCE, 1200x551) [component: Platform=Desktop] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; min-width: 1200px; max-width: 1920px + Node38 (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Node39 (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Node40 (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Node41 (SLOT, 1072x314) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node42 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Node43 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node44 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node45 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node46 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node47 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node48 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node49 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node50 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node51 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node52 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node53 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node54 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node55 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node56 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node57 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node58 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node59 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node60 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node61 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node62 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node63 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node64 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node65 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node66 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node67 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node68 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node69 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node70 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node71 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node72 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node73 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node74 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node75 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node76 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node77 (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Node78 (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Node79 (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Node80 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Node81 (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node82 (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node83 (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Node84 (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Node85 (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node86 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node87 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node88 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node89 (FRAME, 24x24) + Node90 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node91 (FRAME, 24x24) + style: overflow: hidden + Node92 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node93 (FRAME, 24x24) + style: overflow: hidden + Node94 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node95 (FRAME, 24x24) + style: overflow: hidden + Node96 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node97 (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node98 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node99 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node100 (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node101 (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node102 (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node103 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node104 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node105 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node106 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node107 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node108 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node109 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node110 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node111 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node112 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node113 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node114 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node115 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node116 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node117 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node118 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node119 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node120 (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node121 (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node122 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node123 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node124 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node125 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node126 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node127 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node128 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node129 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node130 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node131 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node132 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node133 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node134 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node135 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node136 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node137 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node138 (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node139 (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node140 (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node141 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node142 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node143 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node144 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node145 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node146 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node147 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node148 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node149 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node150 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node151 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node152 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node153 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node154 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..a699c56c Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..11feb43b --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/output.html @@ -0,0 +1,434 @@ + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..7cf59ce7 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,437 @@ +```html +// filename: index.html + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..919ec20e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 22055, + "outputTokens": 14606, + "totalTokens": 36661, + "htmlBytes": 39215, + "htmlLines": 434, + "cssClassCount": 16, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:51:36.255Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/code-base.png new file mode 100644 index 00000000..0de907e9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..613e0829 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/design-tree.txt @@ -0,0 +1,370 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2120) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Hero Image (INSTANCE, 1200x524) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 32px /* var:VariableID:346:10902 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px /* var:VariableID:346:10896 */; width: 100%; background: rgba(255, 255, 255, 0.800000011920929) /* var:VariableID:7753:3701 */; background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D /* var:VariableID:9643:10770 */; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Panel Image Double (INSTANCE, 1200x478) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; opacity: 0.8; min-width: 1200px; max-width: 1920px + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 1200x551) [component: Platform=Desktop] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFFBEB /* var:VariableID:2002:7448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Subheading" + Cards (SLOT, 1072x314) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px /* var:VariableID:107:11150 */; row-gap: 64px /* var:VariableID:107:11150 */; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE /* var:VariableID:2002:7433 */ + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/diff-base.png new file mode 100644 index 00000000..8e6f6b67 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/output.html new file mode 100644 index 00000000..24398e64 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/output.html @@ -0,0 +1,403 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/response.txt new file mode 100644 index 00000000..002b793e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/response.txt @@ -0,0 +1,406 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/result.json new file mode 100644 index 00000000..7dc70385 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "style-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 21594, + "outputTokens": 15201, + "totalTokens": 36795, + "htmlBytes": 39677, + "htmlLines": 403, + "cssClassCount": 11, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:56:53.839Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/code-base.png new file mode 100644 index 00000000..c8377f3e Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..c357460e --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/design-tree.txt @@ -0,0 +1,370 @@ +# Design Tree +# Root: 1200px x 2120px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2120) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Register" + Hero Image (INSTANCE, 1200x524) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 32px; justify-content: center; align-items: center; align-self: STRETCH; padding: 160px 24px 160px 24px; width: 100%; background: rgba(255, 255, 255, 0.800000011920929); background-image: url(images/hero-image@2x.png); background-position: center; background-repeat: no-repeat; background-size: cover; min-width: 1200px; max-width: 1920px + Text Content Title (INSTANCE, 151x132) [component: Align=Center] + component-properties: Has Subtitle#2153:13=true, Subtitle#2153:12=Subtitle, Title#2153:14=Title, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center + Title (TEXT, 151x86) + style: align-self: STRETCH; width: 100%; /* text-style: Title Hero */; font-family: "Inter"; font-weight: 700; font-size: 72px; line-height: 86.4px; letter-spacing: -2.16px; text-align: center; color: #0C0C0D; text: "Title" + Subtitle (TEXT, 151x38) + style: align-self: STRETCH; width: 100%; /* text-style: Subtitle */; font-family: "Inter"; font-weight: 400; font-size: 32px; line-height: 38.4px; text-align: center; display: flex; align-items: center; color: #0C0C0D; text: "Subtitle" + Button Group (INSTANCE, 166x40) [component: Align=Center] + component-properties: Button End#2106:5=true, Button Start#2106:0=true, Align=Center + style: display: flex; flex-direction: row; column-gap: 16px; justify-content: center; align-items: center + Button (INSTANCE, 75x40) [component: Variant=Neutral, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Neutral, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Button" + Button (INSTANCE, 75x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Panel Image Double (INSTANCE, 1200x478) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: row; column-gap: 48px; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #5A5A5A; opacity: 0.8; min-width: 1200px; max-width: 1920px + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Image (FRAME, 512x350) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3; content-image: url(images/image-2@2x.png); object-fit: contain; overflow: hidden + Card Grid Icon (INSTANCE, 1200x551) [component: Platform=Desktop] + component-properties: Cards#6062:30={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #FFFBEB; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 113x61) [component: Align=Start] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=Subheading, Heading#2153:10=Heading, Align=Start + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start + Heading (TEXT, 113x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Heading" + Subheading (TEXT, 113x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: left; display: flex; align-items: center; color: #757575; text: "Subheading" + Cards (SLOT, 1072x314) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 64px; row-gap: 64px; align-items: center; align-self: STRETCH; width: 100%; background: #EBFFEE + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Card (INSTANCE, 300x125) [component: Asset Type=Icon, Variant=Default, Direction=Horizontal] + component-properties: Body2#6062:54={"guid":{"sessionID":-1,"localID":-1}}, Icon#280:68=4039:11823, Asset#113:13=true, Body#280:13=Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. , Heading#280:0=Title, Button#113:15=false, Asset Type=Icon, Variant=Default, Direction=Horizontal + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 24px; align-items: flex-start; flex-grow: 1; min-width: 240px; max-width: 300px + Info (INSTANCE, 32x32) [component: Info] + style: overflow: hidden + Icon (VECTOR, 27x27) + style: border: 3px solid #1E1E1E; svg: + Body2 (SLOT, 244x125) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; flex-grow: 1; min-width: 160px + Text (FRAME, 244x125) + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (TEXT, 244x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Title" + Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. (TEXT, 244x88) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Body text for whatever you’d like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story. " + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..add4c3b4 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..bac716a6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/hero-image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/hero-image@2x.png new file mode 100644 index 00000000..f866bc3d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/hero-image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image-2@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..026d516c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/images/mapping.json @@ -0,0 +1,5 @@ +{ + "175:6348": "hero-image@2x.png", + "I175:6349;321:8686": "image@2x.png", + "I175:6349;321:8687": "image-2@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/output.html new file mode 100644 index 00000000..870e8e93 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/output.html @@ -0,0 +1,478 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+ +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/response.txt new file mode 100644 index 00000000..fd6c68f9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/response.txt @@ -0,0 +1,481 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+
Title
+
Subtitle
+
+ +
+
+
Button
+
+
+
Button
+
+
+
+ + +
+ + +
+ + +
+
+
Heading
+
Subheading
+
+ +
+
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+ +
+
+ + + +
+
+
+
Title
+
Body text for whatever you'd like to say. Add main takeaway points, quotes, anecdotes, or even a very very short story.
+
+
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/result.json new file mode 100644 index 00000000..69abe401 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-landing-page/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-landing-page", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 20132, + "outputTokens": 15206, + "totalTokens": 35338, + "htmlBytes": 40458, + "htmlLines": 478, + "cssClassCount": 20, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:54:17.306Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/code-base.png new file mode 100644 index 00000000..ccbc920d Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/design-tree.txt new file mode 100644 index 00000000..d815a616 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/design-tree.txt @@ -0,0 +1,522 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2105) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product (INSTANCE, 1200x863) [component: Platform=Desktop] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 1200px; max-width: 1920px + Section (FRAME, 1072x735) + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 504x735) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 504x735) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; flex-grow: 1 + Body (FRAME, 504x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 504x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 504x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 504x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 504x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 504x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 504x70) + style: display: flex; flex-direction: row; column-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 504x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 504x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 504x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 472x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 444x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 472x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 472x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 504x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=68:15809, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 1200x422) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; min-width: 1200px; max-width: 1920px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 1072x217) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 48px /* var:VariableID:346:10903 */; row-gap: 48px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 1200x253) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 261x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 261x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 261x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletter" + Form Newsletter (INSTANCE, 338x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Input Field (INSTANCE, 249x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 249x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 217x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/diff-base.png new file mode 100644 index 00000000..e1ac5277 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/output.html new file mode 100644 index 00000000..ed304e04 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/output.html @@ -0,0 +1,697 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/response.txt new file mode 100644 index 00000000..1d297167 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/response.txt @@ -0,0 +1,700 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+ Use cases +
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+ Explore +
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+ Resources +
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/result.json new file mode 100644 index 00000000..7463ab91 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/baseline/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "baseline", + "runIndex": 0, + "similarity": 98, + "inputTokens": 27891, + "outputTokens": 18731, + "totalTokens": 46622, + "htmlBytes": 52425, + "htmlLines": 697, + "cssClassCount": 24, + "cssVariableCount": 16, + "timestamp": "2026-03-28T08:36:29.145Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/code-base.png new file mode 100644 index 00000000..86043c30 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/design-tree.txt new file mode 100644 index 00000000..564a6937 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/design-tree.txt @@ -0,0 +1,454 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2105) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product (INSTANCE, 1200x863) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 1200px; max-width: 1920px + Section (FRAME, 1072x735) + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 504x735) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 504x735) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; flex-grow: 1 + Body (FRAME, 504x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 504x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 504x29) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 504x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 504x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 504x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 504x70) + style: display: flex; flex-direction: row; column-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 240x70) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 240x70) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 504x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 504x386) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 504x106) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 472x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 444x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 472x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 472x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 504x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 1200x422) + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; min-width: 1200px; max-width: 1920px + Text Heading (INSTANCE, 163x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 1072x217) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 48px /* var:VariableID:346:10903 */; row-gap: 48px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 325x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 1200x253) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 261x61) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 261x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 261x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletter" + Form Newsletter (INSTANCE, 338x40) + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Input Field (INSTANCE, 249x40) + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 249x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 217x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 1200x468) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/diff-base.png new file mode 100644 index 00000000..7556ea33 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/output.html new file mode 100644 index 00000000..4b950a83 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/output.html @@ -0,0 +1,569 @@ + + + + + + Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/response.txt new file mode 100644 index 00000000..65c59680 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/response.txt @@ -0,0 +1,572 @@ +```html +// filename: index.html + + + + + + Platform + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+
Text Heading
+
+ +
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ + +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ + +
+
Button
+
+ + +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+
+
+
+
you@example.com
+
+
+
+
Submit
+
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/result.json new file mode 100644 index 00000000..e5cac7a6 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/component-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 25249, + "outputTokens": 20438, + "totalTokens": 45687, + "htmlBytes": 56185, + "htmlLines": 569, + "cssClassCount": 11, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:33:14.453Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/code-base.png new file mode 100644 index 00000000..2fe27b6c Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/design-tree.txt new file mode 100644 index 00000000..09282ed8 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/design-tree.txt @@ -0,0 +1,475 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2105) + style: background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + Figma (FRAME, 40x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: flex-grow: 1 + Slot (SLOT, 553x32) + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: flex-grow: 1; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: flex-grow: 1; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product (INSTANCE, 1200x863) [component: Platform=Desktop] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 1200px; max-width: 1920px + Section (FRAME, 1072x735) + style: position: relative; width: 100% + Image (FRAME, 504x735) + style: flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 504x735) + style: flex-grow: 1 + Body (FRAME, 504x167) + style: width: 100% + Title (FRAME, 504x129) + style: width: 100% + Text Heading (INSTANCE, 504x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 504x84) + style: width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + Price (FRAME, 80x48) + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 504x22) [component: Text] + component-properties: Text#2104:7=Text + style: width: 100% + Text (TEXT, 504x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 504x70) + style: width: 100% + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: flex-grow: 1 + Label (TEXT, 240x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: position: relative; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: flex-grow: 1 + Label (TEXT, 240x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: position: relative; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 504x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 504x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: width: 100%; max-width: 640px + Accordion Item (INSTANCE, 504x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 472x22) + style: width: 100% + Title (TEXT, 444x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 472x44) + style: width: 100% + Body (TEXT, 472x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 504x264) + style: width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=68:15809, Variant=Primary, State=Default, Size=Medium + style: position: absolute; top: 10px; left: 10px; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 1200x422) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; min-width: 1200px; max-width: 1920px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 1072x217) + style: width: 100% + Review Card (INSTANCE, 325x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: flex-grow: 1 + Title (TEXT, 225x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: flex-grow: 1 + Title (TEXT, 225x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: flex-grow: 1; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: flex-grow: 1 + Title (TEXT, 225x22) + style: width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 1200x253) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 261x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Center + Heading (TEXT, 261x29) + style: width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 261x24) + style: width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletter" + Form Newsletter (INSTANCE, 338x40) [component: Form Newsletter] + Input Field (INSTANCE, 249x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: flex-grow: 1 + Input (FRAME, 249x40) + style: width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 217x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + Title (FRAME, 262x38) + style: width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/diff-base.png new file mode 100644 index 00000000..db0002a2 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/output.html new file mode 100644 index 00000000..e630a0b9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/output.html @@ -0,0 +1,422 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+
+ +
+ +
+
+
+
+

Text Heading

+
+
+
+ Tag +
+
+ $ + 50 +
+
+
+
+

Text

+
+
+ +
+
+ +
+ Value + + + +
+
+
+ +
+ Value + + + +
+
+
+ +
+ Button +
+ +
+
+
+

Title

+ + + +
+
+

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

+
+
+
+
+
+ +
+ + + +
+
+ + +
+

Latest reviews

+ +
+
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+

Follow the latest trends

+

With our daily newsletter

+
+ +
+
+ you@example.com +
+
+ Submit +
+
+
+ + +
+
+
+
+ + + +
+
+ + + + + + + + + + + + +
+
+ +
+
+

Use cases

+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+

Explore

+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+

Resources

+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/response.txt new file mode 100644 index 00000000..a9225531 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/response.txt @@ -0,0 +1,430 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+
+ +
+ +
+
+
+
+

Text Heading

+
+
+
+ Tag +
+
+ $ + 50 +
+
+
+
+

Text

+
+
+ +
+
+ +
+ Value + + + +
+
+
+ +
+ Value + + + +
+
+
+ +
+ Button +
+ +
+
+
+

Title

+ + + +
+
+

Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.

+
+
+
+
+
+ +
+ + + +
+
+ + +
+

Latest reviews

+ +
+
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Review title

+

Review body

+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+

Follow the latest trends

+

With our daily newsletter

+
+ +
+
+ you@example.com +
+
+ Submit +
+
+
+ + +
+
+
+
+ + + +
+
+ + + + + + + + + + + + +
+
+ +
+
+

Use cases

+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+

Explore

+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+

Resources

+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+
+ + +``` + +// interpretations: +- Used flexbox layout for complex multi-column sections where exact positioning wasn't specified +- Applied standard padding values (64px, 24px, 16px, 8px) for spacing between sections and components where gaps weren't explicitly defined +- Used display: flex with gap properties for consistent spacing in navigation and button groups +- Applied cursor: pointer to interactive elements (buttons, icon buttons) for better UX +- Used standard margin-bottom for text hierarchy in newsletter section \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/result.json new file mode 100644 index 00000000..1683bf95 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/layout-direction-spacing/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 89, + "inputTokens": 22931, + "outputTokens": 14988, + "totalTokens": 37919, + "htmlBytes": 38389, + "htmlLines": 422, + "cssClassCount": 21, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:29:40.879Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/code-base.png new file mode 100644 index 00000000..d41cb6bd Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/design-tree.txt new file mode 100644 index 00000000..015a9a22 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/design-tree.txt @@ -0,0 +1,522 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Node1 (COMPONENT, 1200x2105) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Node2 (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Node3 (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Node4 (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node5 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node6 (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Node7 (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Node8 (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Node9 (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Node10 (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node11 (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Node12 (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node13 (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Node14 (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node15 (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node16 (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node17 (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Node18 (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Node19 (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Node20 (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Node21 (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Node22 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Node23 (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node24 (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Node25 (INSTANCE, 1200x863) [component: Platform=Desktop] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 1200px; max-width: 1920px + Node26 (FRAME, 1072x735) + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Node27 (FRAME, 504x735) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Node28 (SLOT, 504x735) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; flex-grow: 1 + Node29 (FRAME, 504x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node30 (FRAME, 504x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node31 (INSTANCE, 504x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node32 (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Node33 (FRAME, 504x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Node34 (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Node35 (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Node36 (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Node37 (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + Node38 (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + Node39 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Node40 (INSTANCE, 504x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node41 (TEXT, 504x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Node42 (FRAME, 504x70) + style: display: flex; flex-direction: row; column-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Node43 (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Node44 (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node45 (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Node46 (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Node47 (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Node48 (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node49 (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Node50 (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Node51 (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Node52 (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Node53 (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Node54 (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Node55 (INSTANCE, 504x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node56 (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Node57 (INSTANCE, 504x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Node58 (INSTANCE, 504x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Node59 (FRAME, 472x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Node60 (TEXT, 444x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Node61 (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Node62 (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Node63 (FRAME, 472x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Node64 (TEXT, 472x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Node65 (SLOT, 504x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Node66 (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=68:15809, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node67 (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Node68 (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Node69 (INSTANCE, 1200x422) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; min-width: 1200px; max-width: 1920px + Node70 (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Node71 (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Node72 (FRAME, 1072x217) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 48px /* var:VariableID:346:10903 */; row-gap: 48px; align-items: flex-start; align-self: STRETCH; width: 100% + Node73 (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node74 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node75 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node76 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node77 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node78 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node79 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node80 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node81 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node82 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node83 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node84 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node85 (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node86 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node87 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node88 (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node89 (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node90 (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node91 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node92 (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Node93 (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node94 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node95 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node96 (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node97 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node98 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node99 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node100 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node101 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node102 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node103 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node104 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node105 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node106 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node107 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node108 (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node109 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node110 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node111 (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node112 (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node113 (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node114 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node115 (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Node116 (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node117 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node118 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node119 (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Node120 (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Node121 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node122 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node123 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node124 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node125 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node126 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node127 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node128 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node129 (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Node130 (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Node131 (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node132 (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Node133 (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Node134 (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Node135 (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Node136 (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Node137 (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Node138 (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Node139 (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Node140 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Node141 (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Node142 (INSTANCE, 1200x253) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; min-width: 1200px; max-width: 1920px + Node143 (INSTANCE, 261x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Node144 (TEXT, 261x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Node145 (TEXT, 261x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletter" + Node146 (INSTANCE, 338x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node147 (INSTANCE, 249x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Node148 (FRAME, 249x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Node149 (TEXT, 217x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Node150 (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Node151 (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Node152 (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Node153 (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Node154 (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node155 (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Node156 (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + Node157 (FRAME, 24x24) + Node158 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node159 (FRAME, 24x24) + style: overflow: hidden + Node160 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node161 (FRAME, 24x24) + style: overflow: hidden + Node162 (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node163 (FRAME, 24x24) + style: overflow: hidden + Node164 (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Node165 (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Node166 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node167 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node168 (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Node169 (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Node170 (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node171 (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node172 (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Node173 (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node174 (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Node175 (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node176 (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Node177 (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node178 (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Node179 (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node180 (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Node181 (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node182 (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Node183 (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node184 (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Node185 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node186 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node187 (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Node188 (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Node189 (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node190 (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node191 (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Node192 (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node193 (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Node194 (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node195 (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Node196 (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node197 (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Node198 (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node199 (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Node200 (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node201 (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Node202 (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node203 (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Node204 (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Node205 (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Node206 (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Node207 (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Node208 (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Node209 (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node210 (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Node211 (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node212 (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Node213 (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node214 (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Node215 (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node216 (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Node217 (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node218 (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Node219 (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node220 (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Node221 (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Node222 (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/diff-base.png new file mode 100644 index 00000000..75a30f68 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/output.html new file mode 100644 index 00000000..c8f870e8 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/output.html @@ -0,0 +1,748 @@ + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+ + +
+
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ +
+
Button
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+ + +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/response.txt new file mode 100644 index 00000000..cc85c983 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/response.txt @@ -0,0 +1,751 @@ +```html +// filename: index.html + + + + + + Design System + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+
Products
+
+
+
Solutions
+
+
+
Community
+
+
+
Resources
+
+
+
Pricing
+
+
+
Contact
+
+
+
+ +
+
+
Sign in
+
+
+
Register
+
+
+
+ + +
+
+ + +
+
+
+
+
Text Heading
+
+
+
+
Tag
+
+
+
+
$
+
50
+
+
+
+
+
+
Text
+
+
+ +
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+
Label
+
+
Value
+
+ + + +
+
+
+
+ +
+
Button
+
+ +
+
+
+
Title
+
+ + + +
+
+
+
Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list.
+
+
+
+
+
+ +
+
+ + + +
+
+
+
+ + +
+
+
Latest reviews
+
+ +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
Review title
+
+
+
Review body
+
+
+
+
+ +
+
+
Reviewer name
+
Date
+
+
+
+
+
+ + +
+
+
Follow the latest trends
+
With our daily newsletter
+
+ + +
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+
Use cases
+
+
+
+
+
UI design
+
+
+
UX design
+
+
+
Wireframing
+
+
+
Diagramming
+
+
+
Brainstorming
+
+
+
Online whiteboard
+
+
+
Team collaboration
+
+
+
+ +
+
+
+
Explore
+
+
+
+
+
Design
+
+
+
Prototyping
+
+
+
Development features
+
+
+
Design systems
+
+
+
Collaboration features
+
+
+
Design process
+
+
+
FigJam
+
+
+
+ +
+
+
+
Resources
+
+
+
+
+
Blog
+
+
+
Best practices
+
+
+
Colors
+
+
+
Color wheel
+
+
+
Support
+
+
+
Developers
+
+
+
Resource library
+
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/result.json new file mode 100644 index 00000000..c7da7c1c --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/node-names-hierarchy/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 28144, + "outputTokens": 20168, + "totalTokens": 48312, + "htmlBytes": 56197, + "htmlLines": 748, + "cssClassCount": 31, + "cssVariableCount": 29, + "timestamp": "2026-03-28T09:36:49.240Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/code-base.png new file mode 100644 index 00000000..1e52774b Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/design-tree.txt new file mode 100644 index 00000000..6f2eab2a --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/design-tree.txt @@ -0,0 +1,522 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2105) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF /* var:VariableID:3919:36423 */; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px /* var:VariableID:9:11262 */; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px /* var:VariableID:346:10902 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px /* var:VariableID:9:11259 */; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #F5F5F5 /* var:VariableID:9670:11772 */; border-radius: 8px + Title (TEXT, 68x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36461 */; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 70x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 87x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 79x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 52x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; border-radius: 8px + Title (TEXT, 61x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #E3E3E3 /* var:VariableID:106:12468 */; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Register" + Page Product (INSTANCE, 1200x863) [component: Platform=Desktop] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #FFF1C2 /* var:VariableID:3919:36440 */; min-width: 1200px; max-width: 1920px + Section (FRAME, 1072x735) + style: display: flex; flex-direction: row; column-gap: 64px /* var:VariableID:107:11150 */; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 504x735) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3 /* var:VariableID:3919:36535 */; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 504x735) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; justify-content: center; align-items: flex-start; flex-grow: 1 + Body (FRAME, 504x167) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 504x129) + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 504x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Text Heading" + Price (FRAME, 504x84) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 8px 8px 8px 8px /* var:VariableID:9:11259 */; background: #CFF7D3 /* var:VariableID:3919:36435 */; border-radius: 8px + Tag (TEXT, 28x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D /* var:VariableID:3919:36467 */; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "50" + Text (INSTANCE, 504x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 504x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575 /* var:VariableID:3919:36451 */; text: "Text" + Fields (FRAME, 504x70) + style: display: flex; flex-direction: row; column-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 504x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; width: 100%; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Button" + Accordion (INSTANCE, 504x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px /* var:VariableID:9:11261 */; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 504x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px /* var:VariableID:9:11271 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 472x22) + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 444x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 472x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 472x44) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 504x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=68:15809, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 1200x422) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px /* var:VariableID:346:10903 */; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: rgba(0, 0, 0, 0.5) /* var:VariableID:7786:36548 */; min-width: 1200px; max-width: 1920px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Latest reviews" + Card Grid (FRAME, 1072x217) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 48px /* var:VariableID:346:10903 */; row-gap: 48px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px /* var:VariableID:9:11262 */; background: #FAE1FA /* var:VariableID:72:9197 */; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px /* var:VariableID:9:11258 */; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px /* var:VariableID:9:11258 */; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3 /* var:VariableID:3919:36452 */; text: "Date" + Page Newsletter (INSTANCE, 1200x253) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px /* var:VariableID:107:11150 */; width: 100%; background: #D9D9D9 /* var:VariableID:3919:36448 */; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 261x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: center + Heading (TEXT, 261x29) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Follow the latest trends" + Subheading (TEXT, 261x24) + style: align-self: STRETCH; width: 100%; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575 /* var:VariableID:3919:36451 */; text: "With our daily newsletter" + Form Newsletter (INSTANCE, 338x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Input Field (INSTANCE, 249x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px /* var:VariableID:9:11259 */; align-items: flex-start; flex-grow: 1 + Input (FRAME, 249x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px /* var:VariableID:9:11260 */; width: 100%; background: #FFFFFF /* var:VariableID:3919:36423 */; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 217x16) + style: flex-grow: 1; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px /* var:VariableID:9:11259 */; justify-content: center; align-items: center; padding: 12px 12px 12px 12px /* var:VariableID:9:11260 */; background: #2C2C2C /* var:VariableID:3919:36428 */; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5 /* var:VariableID:3919:36459 */; text: "Submit" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px /* var:VariableID:9:11261 */; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px /* var:VariableID:346:10902 */; width: 100%; background: #5A5A5A /* var:VariableID:106:12464 */; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px /* var:VariableID:9:11262 */; align-items: flex-start; background: #CFF7D3 /* var:VariableID:3919:36435 */; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px /* var:VariableID:9:11261 */; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E /* var:VariableID:3919:36482 */; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE /* var:VariableID:2002:7433 */ + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px /* var:VariableID:9:11260 */; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px /* var:VariableID:9:11261 */; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E /* var:VariableID:3919:36450 */; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/diff-base.png new file mode 100644 index 00000000..b7a76a56 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/output.html new file mode 100644 index 00000000..9a3c4c8d --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/output.html @@ -0,0 +1,690 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/response.txt new file mode 100644 index 00000000..e1c02b59 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/response.txt @@ -0,0 +1,693 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ +
+
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/result.json new file mode 100644 index 00000000..d3ce98bb --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/style-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "style-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 27316, + "outputTokens": 19956, + "totalTokens": 47272, + "htmlBytes": 55022, + "htmlLines": 690, + "cssClassCount": 22, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:43:53.163Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/code-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/code-base.png new file mode 100644 index 00000000..dbc3985c Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/code-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/design-tree.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/design-tree.txt new file mode 100644 index 00000000..c50d6f67 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/design-tree.txt @@ -0,0 +1,522 @@ +# Design Tree +# Root: 1200px x 2105px +# Each node shows: name (TYPE, WxH) followed by CSS-like styles +# Reproduce this tree as HTML. Each node = one HTML element. +# Every style value is from Figma data — use exactly as shown. + +Platform=Desktop (COMPONENT, 1200x2105) + style: display: flex; flex-direction: column; align-items: flex-start; background: #FFFFFF; overflow: hidden + Header (INSTANCE, 1200x99) [component: Platform=Desktop, State=Default] + component-properties: Platform=Desktop, State=Default + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 24px; row-gap: 0px; align-items: center; align-self: STRETCH; padding: 32px 32px 32px 32px; width: 100%; background: #FFFFFF; border-bottom: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px + Block (FRAME, 40x35) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center + Figma (FRAME, 40x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Navigation Pill List (INSTANCE, 870x32) [component: Direction=Row] + component-properties: Slot 2#6061:3={"guid":{"sessionID":-1,"localID":-1}}, Slot#6061:0={"guid":{"sessionID":-1,"localID":-1}}, Link 6#2194:3=true, Link 4#2194:6=true, Link 3#2194:7=true, Link 5#2194:5=true, Link 7#3529:0=false, Link 2#2194:4=true, Link 1#2194:8=true, Direction=Row + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 8px; row-gap: 8px; justify-content: flex-end; align-items: flex-start; flex-grow: 1 + Slot (SLOT, 553x32) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center + Navigation Pill (INSTANCE, 84x32) [component: State=Active] + component-properties: Label#156:33=Products, State=Active + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #F5F5F5; border-radius: 8px + Title (TEXT, 68x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Products" + Navigation Pill (INSTANCE, 86x32) [component: State=Default] + component-properties: Label#156:33=Solutions, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 70x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Solutions" + Navigation Pill (INSTANCE, 103x32) [component: State=Default] + component-properties: Label#156:33=Community, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 87x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Community" + Navigation Pill (INSTANCE, 95x32) [component: State=Default] + component-properties: Label#156:33=Resources, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 79x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resources" + Navigation Pill (INSTANCE, 68x32) [component: State=Default] + component-properties: Label#156:33=Pricing, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 52x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Pricing" + Navigation Pill (INSTANCE, 77x32) [component: State=Default] + component-properties: Label#156:33=Contact, State=Default + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; border-radius: 8px + Title (TEXT, 61x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Contact" + Header Auth (INSTANCE, 178x32) [component: State=Logged Out] + component-properties: State=Logged Out + style: display: flex; flex-direction: row; column-gap: 12px; align-items: center + Button (INSTANCE, 83x32) [component: Variant=Neutral, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Sign in, Variant=Neutral, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #E3E3E3; border: 1px solid #767676; border-radius: 8px; overflow: hidden + [hover]: background: #CDCDCD /* var:VariableID:106:12469 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Sign in" + Button (INSTANCE, 83x32) [component: Variant=Primary, State=Default, Size=Small] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Register, Variant=Primary, State=Default, Size=Small + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; flex-grow: 1; padding: 8px 8px 8px 8px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 63x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Register" + Page Product (INSTANCE, 1200x863) [component: Platform=Desktop] + component-properties: Column#6062:42={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #FFF1C2; min-width: 1200px; max-width: 1920px + Section (FRAME, 1072x735) + style: display: flex; flex-direction: row; column-gap: 64px; align-items: flex-start; align-self: STRETCH; position: relative; width: 100% + Image (FRAME, 504x735) + style: display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: STRETCH; flex-grow: 1; height: 100%; background: #E3E3E3; content-image: url(images/image@2x.png); object-fit: contain; overflow: hidden + Column (SLOT, 504x735) + style: display: flex; flex-direction: column; row-gap: 24px; justify-content: center; align-items: flex-start; flex-grow: 1 + Body (FRAME, 504x167) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Title (FRAME, 504x129) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 504x29) [component: Text Heading] + component-properties: Text#2104:5=Text Heading + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (TEXT, 149x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Text Heading" + Price (FRAME, 504x84) + style: display: flex; flex-direction: column; row-gap: 4px; justify-content: center; align-items: flex-start; align-self: STRETCH; width: 100% + Tag (INSTANCE, 44x32) [component: Scheme=Positive, State=Default, Variant=Secondary] + component-properties: Label#9765:0=Tag, Removable#147:0=false, Scheme=Positive, State=Default, Variant=Secondary + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 8px 8px 8px 8px; background: #CFF7D3; border-radius: 8px + Tag (TEXT, 28x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #02542D; text: "Tag" + Text Price (INSTANCE, 80x48) [component: Size=Large] + component-properties: Price#1443:0=50, Label#1443:1=/ mo, Currency#1443:2=$, Has Label#1443:3=false, Size=Large + style: display: flex; flex-direction: row; justify-content: center; align-items: flex-end + Price (FRAME, 80x48) + style: display: flex; flex-direction: row; align-items: flex-start + $ (TEXT, 16x24) + style: font-family: "Inter"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "$" + 50 (TEXT, 64x48) + style: font-family: "Inter"; font-weight: 700; font-size: 48px; line-height: 48px; letter-spacing: -0.96px; text-align: left; color: #1E1E1E; text: "50" + Text (INSTANCE, 504x22) [component: Text] + component-properties: Text#2104:7=Text + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 504x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #757575; text: "Text" + Fields (FRAME, 504x70) + style: display: flex; flex-direction: row; column-gap: 24px; align-items: center; align-self: STRETCH; width: 100% + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Select Field (INSTANCE, 240x70) [component: State=Default, Value Type=Default] + component-properties: Error#280:88=Error, Value#630:7=Value, Has Description#611:4=false, Has Error#72:6=true, Description#611:0=Description, Label#280:85=Label, Open#586:0=false, Has Label#57:0=true, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; flex-grow: 1 + Label (TEXT, 240x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Label" + Select (FRAME, 240x40) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; position: relative; padding: 12px 12px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 120px + Value (TEXT, 188x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "Value" + Chevron down (INSTANCE, 16x16) [component: Chevron down] + style: overflow: hidden + Icon (VECTOR, 8x4) + style: border: 1.600000023841858px solid #1E1E1E; svg: + Button (INSTANCE, 504x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Button, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; align-self: STRETCH; padding: 12px 12px 12px 12px; width: 100%; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 51x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Button" + Accordion (INSTANCE, 504x386) [component: Accordion] + component-properties: Items#6031:6={"guid":{"sessionID":-1,"localID":-1}} + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100%; max-width: 640px + Accordion Item (INSTANCE, 504x106) [component: State=Open] + component-properties: Content#149:27=Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list., Title#149:24=Title, State=Open + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; align-self: STRETCH; padding: 16px 16px 16px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px + Accordion Title (FRAME, 472x22) + style: display: flex; flex-direction: row; column-gap: 8px; align-items: center; align-self: STRETCH; width: 100% + Title (TEXT, 444x22) + style: flex-grow: 1; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Title" + Chevron up (INSTANCE, 20x20) [component: Chevron up] + style: overflow: hidden + Icon (VECTOR, 10x5) + style: border: 2px solid #1E1E1E; svg: + Accordion Content (FRAME, 472x44) + style: display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: STRETCH; width: 100% + Body (TEXT, 472x44) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list." + Items (SLOT, 504x264) + style: display: flex; flex-direction: column; row-gap: 16px; align-items: flex-start; align-self: STRETCH; width: 100% + Icon Button (INSTANCE, 44x44) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon#4:192=68:15809, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; position: absolute; top: 10px; left: 10px; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 32px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Heart (INSTANCE, 20x20) [component: Heart] + style: overflow: hidden + Icon (VECTOR, 17x15) + style: border: 1.600000023841858px solid #F5F5F5; svg: + Card Grid Reviews (INSTANCE, 1200x422) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 48px; align-items: flex-start; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: rgba(0, 0, 0, 0.5); min-width: 1200px; max-width: 1920px + Text Heading (INSTANCE, 163x29) [component: Text Heading] + component-properties: Text#2104:5=Latest reviews + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 163x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Latest reviews" + Card Grid (FRAME, 1072x217) + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 48px; row-gap: 48px; align-items: flex-start; align-self: STRETCH; width: 100% + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-2@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Review Card (INSTANCE, 325x217) [component: Review Card] + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; flex-grow: 1; padding: 24px 24px 24px 24px; background: #FAE1FA; border: 1px solid #D9D9D9; border-radius: 8px; min-width: 240px + Rating (FRAME, 116x20) + style: display: flex; flex-direction: row; column-gap: 4px; align-items: center + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Star (INSTANCE, 20x20) [component: Star] + style: overflow: hidden + Icon (VECTOR, 17x16) + style: border: 2px solid #2C2C2C; svg: + Review Body (FRAME, 277x55) + style: display: flex; flex-direction: column; row-gap: 4px; align-items: flex-start; align-self: STRETCH; width: 100% + Text Heading (INSTANCE, 130x29) [component: Text Heading] + component-properties: Text#2104:5=Review title + style: display: flex; flex-direction: row; align-items: flex-start + Text Heading (TEXT, 130x29) + style: /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: left; color: #1E1E1E; text: "Review title" + Text (INSTANCE, 277x22) [component: Text] + component-properties: Text#2104:7=Review body + style: display: flex; flex-direction: row; align-items: flex-start; align-self: STRETCH; width: 100% + Text (TEXT, 277x22) + style: flex-grow: 1; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Review body" + Avatar Block (INSTANCE, 277x46) [component: Avatar Block] + component-properties: Description#2010:8=Date, Title#2010:7=Reviewer name + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start; align-self: STRETCH; width: 100% + Avatar (INSTANCE, 40x40) [component: Type=Image, Size=Large, Shape=Circle] + component-properties: Initials#24:281=F, Type=Image, Size=Large, Shape=Circle + style: border-radius: 9999px; overflow: hidden + Shape (RECTANGLE, 40x40) + style: content-image: url(images/shape-3@2x.png); object-fit: cover + Info (FRAME, 225x46) + style: display: flex; flex-direction: column; row-gap: 2px; align-items: flex-start; flex-grow: 1 + Title (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #757575; text: "Reviewer name" + Description (TEXT, 225x22) + style: align-self: STRETCH; width: 100%; /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #B3B3B3; text: "Date" + Page Newsletter (INSTANCE, 1200x253) [component: Platform=Desktop] + component-properties: Platform=Desktop + style: display: flex; flex-direction: column; row-gap: 24px; align-items: center; align-self: STRETCH; padding: 64px 64px 64px 64px; width: 100%; background: #D9D9D9; min-width: 1200px; max-width: 1920px + Text Content Heading (INSTANCE, 261x61) [component: Align=Center] + component-properties: Has Subheading#2153:9=true, Subheading#2153:11=With our daily newsletter, Heading#2153:10=Follow the latest trends, Align=Center + style: display: flex; flex-direction: column; row-gap: 8px; align-items: center + Heading (TEXT, 261x29) + style: align-self: STRETCH; width: 100%; /* text-style: Heading */; font-family: "Inter"; font-weight: 600; font-size: 24px; line-height: 28.8px; letter-spacing: -0.48px; text-align: center; color: #1E1E1E; text: "Follow the latest trends" + Subheading (TEXT, 261x24) + style: align-self: STRETCH; width: 100%; /* text-style: Subheading */; font-family: "Inter"; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; display: flex; align-items: center; color: #757575; text: "With our daily newsletter" + Form Newsletter (INSTANCE, 338x40) [component: Form Newsletter] + style: display: flex; flex-direction: row; column-gap: 12px; align-items: flex-start + Input Field (INSTANCE, 249x40) [component: State=Default, Value Type=Default] + component-properties: Value#630:14=you@example.com, Description#611:27=Description, Has Label#57:0=false, Error#280:44=Error, Has Error#72:6=false, Label#280:41=Email address, Has Description#611:20=false, State=Default, Value Type=Default + style: display: flex; flex-direction: column; row-gap: 8px; align-items: flex-start; flex-grow: 1 + Input (FRAME, 249x40) + style: display: flex; flex-direction: row; align-items: center; align-self: STRETCH; padding: 12px 16px 12px 16px; width: 100%; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 8px; overflow: hidden; min-width: 120px + Value (TEXT, 217x16) + style: flex-grow: 1; /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #1E1E1E; text: "you@example.com" + Button (INSTANCE, 77x40) [component: Variant=Primary, State=Default, Size=Medium] + component-properties: Icon End#4:0=68:16113, Icon Start#4:192=68:16009, Has Icon End#4:64=false, Has Icon Start#4:128=false, Label#2:0=Submit, Variant=Primary, State=Default, Size=Medium + style: display: flex; flex-direction: row; column-gap: 8px; justify-content: center; align-items: center; padding: 12px 12px 12px 12px; background: #2C2C2C; border: 1px solid #2C2C2C; border-radius: 8px; overflow: hidden + [hover]: background: #1E1E1E /* var:VariableID:3919:36431 */ + Button (TEXT, 53x16) + style: /* text-style: Single Line/Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 16px; text-align: left; color: #F5F5F5; text: "Submit" + Footer (INSTANCE, 1200x468) [component: Platform=Desktop] + component-properties: Title#6062:15={"guid":{"sessionID":-1,"localID":-1}}, Slot#6062:12={"guid":{"sessionID":-1,"localID":-1}}, Platform=Desktop + style: display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 16px; align-items: flex-start; align-self: STRETCH; padding: 32px 32px 160px 32px; width: 100%; background: #5A5A5A; border-top: 1px solid #D9D9D9; overflow: hidden; min-width: 1200px; max-width: 1920px + Title (SLOT, 262x83) + style: display: flex; flex-direction: column; row-gap: 24px; align-items: flex-start; background: #CFF7D3; min-width: 240px + Figma (FRAME, 23x35) + style: display: flex; flex-direction: row; justify-content: center; align-items: center + Icon (VECTOR, 23x35) + style: border: 3.5px solid #1E1E1E; svg: + Button List (FRAME, 144x24) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center + X Logo (FRAME, 24x24) + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo Instagram (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Logo YouTube (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x18) + style: background: #1E1E1E; svg: + LinkedIn (FRAME, 24x24) + style: overflow: hidden + Icon (VECTOR, 24x24) + style: background: #1E1E1E; svg: + Slot (SLOT, 818x276) + style: display: flex; flex-direction: row; column-gap: 16px; align-items: center; background: #EBFFEE + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 80x22) [component: Text Strong] + component-properties: Text#2104:8=Use cases + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 80x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Use cases" + Slot (SLOT, 144x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 72x22) [component: Text Link List Item] + component-properties: Text#2153:15=UI design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 72x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UI design" + Text Link List Item (INSTANCE, 78x22) [component: Text Link List Item] + component-properties: Text#2153:15=UX design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 78x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "UX design" + Text Link List Item (INSTANCE, 92x22) [component: Text Link List Item] + component-properties: Text#2153:15=Wireframing + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 92x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Wireframing" + Text Link List Item (INSTANCE, 100x22) [component: Text Link List Item] + component-properties: Text#2153:15=Diagramming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 100x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Diagramming" + Text Link List Item (INSTANCE, 105x22) [component: Text Link List Item] + component-properties: Text#2153:15=Brainstorming + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 105x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Brainstorming" + Text Link List Item (INSTANCE, 138x22) [component: Text Link List Item] + component-properties: Text#2153:15=Online whiteboard + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 138x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Online whiteboard" + Text Link List Item (INSTANCE, 144x22) [component: Text Link List Item] + component-properties: Text#2153:15=Team collaboration + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 144x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Team collaboration" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 59x22) [component: Text Strong] + component-properties: Text#2104:8=Explore + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 59x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Explore" + Slot (SLOT, 168x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 53x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 53x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design" + Text Link List Item (INSTANCE, 89x22) [component: Text Link List Item] + component-properties: Text#2153:15=Prototyping + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 89x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Prototyping" + Text Link List Item (INSTANCE, 167x22) [component: Text Link List Item] + component-properties: Text#2153:15=Development features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 167x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Development features" + Text Link List Item (INSTANCE, 120x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design systems + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 120x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design systems" + Text Link List Item (INSTANCE, 168x22) [component: Text Link List Item] + component-properties: Text#2153:15=Collaboration features + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 168x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Collaboration features" + Text Link List Item (INSTANCE, 117x22) [component: Text Link List Item] + component-properties: Text#2153:15=Design process + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 117x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Design process" + Text Link List Item (INSTANCE, 55x22) [component: Text Link List Item] + component-properties: Text#2153:15=FigJam + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 55x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "FigJam" + Text Link List (INSTANCE, 262x276) [component: Density=Default] + component-properties: Slot#6062:6={"guid":{"sessionID":-1,"localID":-1}}, Has Title#322:21=true, Density=Default + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Title (FRAME, 262x38) + style: display: flex; flex-direction: column; align-items: flex-start; align-self: STRETCH; padding: 0px 0px 16px 0px; width: 100% + Text Strong (INSTANCE, 82x22) [component: Text Strong] + component-properties: Text#2104:8=Resources + style: display: flex; flex-direction: row; align-items: flex-start + Text Strong (TEXT, 82x22) + style: /* text-style: Body Strong */; font-family: "Inter"; font-weight: 600; font-size: 16px; line-height: 22.4px; text-align: left; color: #1E1E1E; text: "Resources" + Slot (SLOT, 123x226) + style: display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start + Text Link List Item (INSTANCE, 34x22) [component: Text Link List Item] + component-properties: Text#2153:15=Blog + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 34x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Blog" + Text Link List Item (INSTANCE, 109x22) [component: Text Link List Item] + component-properties: Text#2153:15=Best practices + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 109x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Best practices" + Text Link List Item (INSTANCE, 49x22) [component: Text Link List Item] + component-properties: Text#2153:15=Colors + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 49x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Colors" + Text Link List Item (INSTANCE, 90x22) [component: Text Link List Item] + component-properties: Text#2153:15=Color wheel + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 90x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Color wheel" + Text Link List Item (INSTANCE, 61x22) [component: Text Link List Item] + component-properties: Text#2153:15=Support + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 61x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Support" + Text Link List Item (INSTANCE, 86x22) [component: Text Link List Item] + component-properties: Text#2153:15=Developers + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 86x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Developers" + Text Link List Item (INSTANCE, 123x22) [component: Text Link List Item] + component-properties: Text#2153:15=Resource library + style: display: flex; flex-direction: row; justify-content: center; align-items: center + List item (TEXT, 123x22) + style: /* text-style: Body Base */; font-family: "Inter"; font-weight: 400; font-size: 16px; line-height: 22.4px; text-align: left; display: flex; align-items: center; color: #1E1E1E; text: "Resource library" \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/diff-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/diff-base.png new file mode 100644 index 00000000..317906cd Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/diff-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/figma-base.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/figma-base.png new file mode 100644 index 00000000..0472efe9 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/figma-base.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/image@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/image@2x.png new file mode 100644 index 00000000..ed8074b0 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/image@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/mapping.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/mapping.json new file mode 100644 index 00000000..cf113448 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/mapping.json @@ -0,0 +1,6 @@ +{ + "I175:8313;3044:2453": "image@2x.png", + "I175:8315;2236:16107;2236:16098;2010:15576;9762:1114": "shape@2x.png", + "I175:8315;2236:16130;2236:16098;2010:15576;9762:1114": "shape-2@2x.png", + "I175:8315;2236:16153;2236:16098;2010:15576;9762:1114": "shape-3@2x.png" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-2@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-2@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-2@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-3@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-3@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape-3@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape@2x.png b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape@2x.png new file mode 100644 index 00000000..bdee12c6 Binary files /dev/null and b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/images/shape@2x.png differ diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/output.html b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/output.html new file mode 100644 index 00000000..7cca52ff --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/output.html @@ -0,0 +1,723 @@ + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/response.txt b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/response.txt new file mode 100644 index 00000000..88842da9 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/response.txt @@ -0,0 +1,726 @@ +```html +// filename: index.html + + + + + + Platform Desktop + + + + +
+ +
+
+
+ + + +
+
+ +
+
+
+ Products +
+
+ Solutions +
+
+ Community +
+
+ Resources +
+
+ Pricing +
+
+ Contact +
+
+
+ +
+
+ Sign in +
+
+ Register +
+
+
+ + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ Text Heading +
+ +
+
+ Tag +
+
+
+ $ + 50 +
+
+
+
+
+ Text +
+
+ + +
+
+ Label +
+ Value +
+ + + +
+
+
+
+ Label +
+ Value +
+ + + +
+
+
+
+ + +
+ Button +
+ + +
+
+
+ Title +
+ + + +
+
+
+ Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. +
+
+
+
+
+ + +
+
+ + + +
+
+
+
+ + +
+
+ Latest reviews +
+ +
+ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ Review title +
+
+ Review body +
+
+
+
+ +
+
+ Reviewer name + Date +
+
+
+
+
+ + +
+
+ Follow the latest trends + With our daily newsletter +
+ +
+
+
+ you@example.com +
+
+
+ Submit +
+
+
+ + +
+ +
+
+ + + +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ + +
+ +
+
+
+ Use cases +
+
+
+
+ UI design +
+
+ UX design +
+
+ Wireframing +
+
+ Diagramming +
+
+ Brainstorming +
+
+ Online whiteboard +
+
+ Team collaboration +
+
+
+ + +
+
+
+ Explore +
+
+
+
+ Design +
+
+ Prototyping +
+
+ Development features +
+
+ Design systems +
+
+ Collaboration features +
+
+ Design process +
+
+ FigJam +
+
+
+ + +
+
+
+ Resources +
+
+
+
+ Blog +
+
+ Best practices +
+
+ Colors +
+
+ Color wheel +
+
+ Support +
+
+ Developers +
+
+ Resource library +
+
+
+
+
+
+ + +``` + +// interpretations: none \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/result.json b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/result.json new file mode 100644 index 00000000..ebcd355f --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/desktop-product-detail/variable-references/run-0/result.json @@ -0,0 +1,15 @@ +{ + "fixture": "desktop-product-detail", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 25437, + "outputTokens": 20460, + "totalTokens": 45897, + "htmlBytes": 56669, + "htmlLines": 723, + "cssClassCount": 27, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:40:24.579Z", + "configVersion": "72ffc72c9103" +} \ No newline at end of file diff --git a/data/ablation/phase1/72ffc72c9103/summary.json b/data/ablation/phase1/72ffc72c9103/summary.json new file mode 100644 index 00000000..5d8b8c15 --- /dev/null +++ b/data/ablation/phase1/72ffc72c9103/summary.json @@ -0,0 +1,444 @@ +{ + "configVersion": "72ffc72c9103", + "model": "sonnet", + "runsPerCondition": 1, + "fixtures": [ + "desktop-product-detail", + "desktop-landing-page", + "desktop-ai-chat" + ], + "results": [ + { + "fixture": "desktop-product-detail", + "type": "baseline", + "runIndex": 0, + "similarity": 98, + "inputTokens": 27891, + "outputTokens": 18731, + "totalTokens": 46622, + "htmlBytes": 52425, + "htmlLines": 697, + "cssClassCount": 24, + "cssVariableCount": 16, + "timestamp": "2026-03-28T08:36:29.145Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-product-detail", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 89, + "inputTokens": 22931, + "outputTokens": 14988, + "totalTokens": 37919, + "htmlBytes": 38389, + "htmlLines": 422, + "cssClassCount": 21, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:29:40.879Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-product-detail", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 25249, + "outputTokens": 20438, + "totalTokens": 45687, + "htmlBytes": 56185, + "htmlLines": 569, + "cssClassCount": 11, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:33:14.453Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-product-detail", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 28144, + "outputTokens": 20168, + "totalTokens": 48312, + "htmlBytes": 56197, + "htmlLines": 748, + "cssClassCount": 31, + "cssVariableCount": 29, + "timestamp": "2026-03-28T09:36:49.240Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-product-detail", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 25437, + "outputTokens": 20460, + "totalTokens": 45897, + "htmlBytes": 56669, + "htmlLines": 723, + "cssClassCount": 27, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:40:24.579Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-product-detail", + "type": "style-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 27316, + "outputTokens": 19956, + "totalTokens": 47272, + "htmlBytes": 55022, + "htmlLines": 690, + "cssClassCount": 22, + "cssVariableCount": 16, + "timestamp": "2026-03-28T09:43:53.163Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "baseline", + "runIndex": 0, + "similarity": 99, + "inputTokens": 22076, + "outputTokens": 14403, + "totalTokens": 36479, + "htmlBytes": 38420, + "htmlLines": 454, + "cssClassCount": 18, + "cssVariableCount": 14, + "timestamp": "2026-03-28T08:39:01.879Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 93, + "inputTokens": 18130, + "outputTokens": 12828, + "totalTokens": 30958, + "htmlBytes": 32759, + "htmlLines": 455, + "cssClassCount": 20, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:46:14.669Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "component-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 19549, + "outputTokens": 15997, + "totalTokens": 35546, + "htmlBytes": 43376, + "htmlLines": 405, + "cssClassCount": 9, + "cssVariableCount": 22, + "timestamp": "2026-03-28T09:49:03.549Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 98, + "inputTokens": 22055, + "outputTokens": 14606, + "totalTokens": 36661, + "htmlBytes": 39215, + "htmlLines": 434, + "cssClassCount": 16, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:51:36.255Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "variable-references", + "runIndex": 0, + "similarity": 98, + "inputTokens": 20132, + "outputTokens": 15206, + "totalTokens": 35338, + "htmlBytes": 40458, + "htmlLines": 478, + "cssClassCount": 20, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:54:17.306Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-landing-page", + "type": "style-references", + "runIndex": 0, + "similarity": 99, + "inputTokens": 21594, + "outputTokens": 15201, + "totalTokens": 36795, + "htmlBytes": 39677, + "htmlLines": 403, + "cssClassCount": 11, + "cssVariableCount": 14, + "timestamp": "2026-03-28T09:56:53.839Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "baseline", + "runIndex": 0, + "similarity": 91, + "inputTokens": 23305, + "outputTokens": 16445, + "totalTokens": 39750, + "htmlBytes": 43346, + "htmlLines": 616, + "cssClassCount": 23, + "cssVariableCount": 21, + "timestamp": "2026-03-28T08:29:54.552Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "layout-direction-spacing", + "runIndex": 0, + "similarity": 96, + "inputTokens": 19371, + "outputTokens": 13950, + "totalTokens": 33321, + "htmlBytes": 34183, + "htmlLines": 393, + "cssClassCount": 14, + "cssVariableCount": 17, + "timestamp": "2026-03-28T09:59:44.838Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "component-references", + "runIndex": 0, + "similarity": 97, + "inputTokens": 21544, + "outputTokens": 16839, + "totalTokens": 38383, + "htmlBytes": 43841, + "htmlLines": 389, + "cssClassCount": 8, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:02:56.322Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "node-names-hierarchy", + "runIndex": 0, + "similarity": 97, + "inputTokens": 23052, + "outputTokens": 17346, + "totalTokens": 40398, + "htmlBytes": 45309, + "htmlLines": 457, + "cssClassCount": 8, + "cssVariableCount": 15, + "timestamp": "2026-03-28T10:06:13.301Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "variable-references", + "runIndex": 0, + "similarity": 96, + "inputTokens": 21407, + "outputTokens": 17137, + "totalTokens": 38544, + "htmlBytes": 44512, + "htmlLines": 557, + "cssClassCount": 19, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:09:30.267Z", + "configVersion": "72ffc72c9103" + }, + { + "fixture": "desktop-ai-chat", + "type": "style-references", + "runIndex": 0, + "similarity": 96, + "inputTokens": 22863, + "outputTokens": 18547, + "totalTokens": 41410, + "htmlBytes": 47914, + "htmlLines": 580, + "cssClassCount": 18, + "cssVariableCount": 16, + "timestamp": "2026-03-28T10:12:56.511Z", + "configVersion": "72ffc72c9103" + } + ], + "rankings": [ + { + "type": "layout-direction-spacing", + "avgDeltaV": 3.3333333333333335, + "avgDeltaOutputTokens": -2604.3333333333335, + "avgDeltaHtmlBytes": -9620, + "avgDeltaCssClasses": -3.3333333333333335, + "avgDeltaCssVariables": -1.3333333333333333, + "fixtureCount": 3, + "perFixture": { + "desktop-product-detail": { + "deltaV": 9, + "deltaOutputTokens": -3743, + "deltaHtmlBytes": -14036, + "deltaCssClasses": -3, + "deltaCssVariables": 0 + }, + "desktop-landing-page": { + "deltaV": 6, + "deltaOutputTokens": -1575, + "deltaHtmlBytes": -5661, + "deltaCssClasses": 2, + "deltaCssVariables": 0 + }, + "desktop-ai-chat": { + "deltaV": -5, + "deltaOutputTokens": -2495, + "deltaHtmlBytes": -9163, + "deltaCssClasses": -9, + "deltaCssVariables": -4 + } + } + }, + { + "type": "variable-references", + "avgDeltaV": -1.3333333333333333, + "avgDeltaOutputTokens": 1074.6666666666667, + "avgDeltaHtmlBytes": 2482.6666666666665, + "avgDeltaCssClasses": 0.3333333333333333, + "avgDeltaCssVariables": -1.6666666666666667, + "fixtureCount": 3, + "perFixture": { + "desktop-product-detail": { + "deltaV": 0, + "deltaOutputTokens": 1729, + "deltaHtmlBytes": 4244, + "deltaCssClasses": 3, + "deltaCssVariables": 0 + }, + "desktop-landing-page": { + "deltaV": 1, + "deltaOutputTokens": 803, + "deltaHtmlBytes": 2038, + "deltaCssClasses": 2, + "deltaCssVariables": 0 + }, + "desktop-ai-chat": { + "deltaV": -5, + "deltaOutputTokens": 692, + "deltaHtmlBytes": 1166, + "deltaCssClasses": -4, + "deltaCssVariables": -5 + } + } + }, + { + "type": "style-references", + "avgDeltaV": -1.6666666666666667, + "avgDeltaOutputTokens": 1375, + "avgDeltaHtmlBytes": 2807.3333333333335, + "avgDeltaCssClasses": -4.666666666666667, + "avgDeltaCssVariables": -1.6666666666666667, + "fixtureCount": 3, + "perFixture": { + "desktop-product-detail": { + "deltaV": 0, + "deltaOutputTokens": 1225, + "deltaHtmlBytes": 2597, + "deltaCssClasses": -2, + "deltaCssVariables": 0 + }, + "desktop-landing-page": { + "deltaV": 0, + "deltaOutputTokens": 798, + "deltaHtmlBytes": 1257, + "deltaCssClasses": -7, + "deltaCssVariables": 0 + }, + "desktop-ai-chat": { + "deltaV": -5, + "deltaOutputTokens": 2102, + "deltaHtmlBytes": 4568, + "deltaCssClasses": -5, + "deltaCssVariables": -5 + } + } + }, + { + "type": "node-names-hierarchy", + "avgDeltaV": -1.6666666666666667, + "avgDeltaOutputTokens": 847, + "avgDeltaHtmlBytes": 2176.6666666666665, + "avgDeltaCssClasses": -3.3333333333333335, + "avgDeltaCssVariables": 2.3333333333333335, + "fixtureCount": 3, + "perFixture": { + "desktop-product-detail": { + "deltaV": 0, + "deltaOutputTokens": 1437, + "deltaHtmlBytes": 3772, + "deltaCssClasses": 7, + "deltaCssVariables": 13 + }, + "desktop-landing-page": { + "deltaV": 1, + "deltaOutputTokens": 203, + "deltaHtmlBytes": 795, + "deltaCssClasses": -2, + "deltaCssVariables": 0 + }, + "desktop-ai-chat": { + "deltaV": -6, + "deltaOutputTokens": 901, + "deltaHtmlBytes": 1963, + "deltaCssClasses": -15, + "deltaCssVariables": -6 + } + } + }, + { + "type": "component-references", + "avgDeltaV": -2.3333333333333335, + "avgDeltaOutputTokens": 1231.6666666666667, + "avgDeltaHtmlBytes": 3070.3333333333335, + "avgDeltaCssClasses": -12.333333333333334, + "avgDeltaCssVariables": 1, + "fixtureCount": 3, + "perFixture": { + "desktop-product-detail": { + "deltaV": -1, + "deltaOutputTokens": 1707, + "deltaHtmlBytes": 3760, + "deltaCssClasses": -13, + "deltaCssVariables": 0 + }, + "desktop-landing-page": { + "deltaV": 0, + "deltaOutputTokens": 1594, + "deltaHtmlBytes": 4956, + "deltaCssClasses": -9, + "deltaCssVariables": 8 + }, + "desktop-ai-chat": { + "deltaV": -6, + "deltaOutputTokens": 394, + "deltaHtmlBytes": 495, + "deltaCssClasses": -15, + "deltaCssVariables": -5 + } + } + } + ] +} \ No newline at end of file diff --git a/fixtures/desktop-ai-chat/data.json b/fixtures/desktop-ai-chat/data.json index 14f885b4..0f251c47 100644 --- a/fixtures/desktop-ai-chat/data.json +++ b/fixtures/desktop-ai-chat/data.json @@ -1,8 +1,8 @@ { "fileKey": "pNmINk52N1oRQD0q7jAxOf", "name": "Simple Design System (Community)", - "lastModified": "2026-03-27T15:54:42Z", - "version": "2335661297513016315", + "lastModified": "2026-03-28T08:12:26Z", + "version": "2335880958871328362", "document": { "id": "5612:8808", "name": "Platform=Desktop", diff --git a/fixtures/desktop-ai-chat/images/shape@2x.png b/fixtures/desktop-ai-chat/images/shape@2x.png index 0090977a..bdee12c6 100644 Binary files a/fixtures/desktop-ai-chat/images/shape@2x.png and b/fixtures/desktop-ai-chat/images/shape@2x.png differ diff --git a/fixtures/desktop-landing-page/data.json b/fixtures/desktop-landing-page/data.json index 235fbdb9..79680fca 100644 --- a/fixtures/desktop-landing-page/data.json +++ b/fixtures/desktop-landing-page/data.json @@ -1,8 +1,8 @@ { "fileKey": "pNmINk52N1oRQD0q7jAxOf", "name": "Simple Design System (Community)", - "lastModified": "2026-03-27T15:54:42Z", - "version": "2335661297513016315", + "lastModified": "2026-03-28T08:12:26Z", + "version": "2335880958871328362", "document": { "id": "175:6523", "name": "Platform=Desktop", diff --git a/fixtures/desktop-landing-page/images/hero-image@2x.png b/fixtures/desktop-landing-page/images/hero-image@2x.png index b805244e..f866bc3d 100644 Binary files a/fixtures/desktop-landing-page/images/hero-image@2x.png and b/fixtures/desktop-landing-page/images/hero-image@2x.png differ diff --git a/fixtures/desktop-landing-page/images/image-2@2x.png b/fixtures/desktop-landing-page/images/image-2@2x.png index 20ab1992..ed8074b0 100644 Binary files a/fixtures/desktop-landing-page/images/image-2@2x.png and b/fixtures/desktop-landing-page/images/image-2@2x.png differ diff --git a/fixtures/desktop-landing-page/images/image@2x.png b/fixtures/desktop-landing-page/images/image@2x.png index 20ab1992..ed8074b0 100644 Binary files a/fixtures/desktop-landing-page/images/image@2x.png and b/fixtures/desktop-landing-page/images/image@2x.png differ diff --git a/fixtures/desktop-product-detail/data.json b/fixtures/desktop-product-detail/data.json index ffc38d8b..235dc3b6 100644 --- a/fixtures/desktop-product-detail/data.json +++ b/fixtures/desktop-product-detail/data.json @@ -1,8 +1,8 @@ { "fileKey": "pNmINk52N1oRQD0q7jAxOf", "name": "Simple Design System (Community)", - "lastModified": "2026-03-27T15:54:42Z", - "version": "2335661297513016315", + "lastModified": "2026-03-28T08:12:26Z", + "version": "2335880958871328362", "document": { "id": "175:8591", "name": "Platform=Desktop", diff --git a/fixtures/desktop-product-detail/images/image@2x.png b/fixtures/desktop-product-detail/images/image@2x.png index 26a7b93f..ed8074b0 100644 Binary files a/fixtures/desktop-product-detail/images/image@2x.png and b/fixtures/desktop-product-detail/images/image@2x.png differ diff --git a/fixtures/desktop-product-detail/images/shape-2@2x.png b/fixtures/desktop-product-detail/images/shape-2@2x.png index 0286f0fb..bdee12c6 100644 Binary files a/fixtures/desktop-product-detail/images/shape-2@2x.png and b/fixtures/desktop-product-detail/images/shape-2@2x.png differ diff --git a/fixtures/desktop-product-detail/images/shape-3@2x.png b/fixtures/desktop-product-detail/images/shape-3@2x.png index 0286f0fb..bdee12c6 100644 Binary files a/fixtures/desktop-product-detail/images/shape-3@2x.png and b/fixtures/desktop-product-detail/images/shape-3@2x.png differ diff --git a/fixtures/desktop-product-detail/images/shape@2x.png b/fixtures/desktop-product-detail/images/shape@2x.png index 0286f0fb..bdee12c6 100644 Binary files a/fixtures/desktop-product-detail/images/shape@2x.png and b/fixtures/desktop-product-detail/images/shape@2x.png differ diff --git a/src/agents/ablation/helpers.ts b/src/agents/ablation/helpers.ts index 46ebfa8c..db243026 100644 --- a/src/agents/ablation/helpers.ts +++ b/src/agents/ablation/helpers.ts @@ -162,8 +162,10 @@ export async function renderAndCompare( const { PNG } = await import("pngjs"); const figmaImage = PNG.sync.read(readFileSync(figmaScreenshotPath)); const figmaWidth = figmaImage.width; - // 1920/768 screenshots are @1x, 1200/375 are @2x - const exportScale = figmaWidth > 1500 ? 1 : 2; + // Figma save-fixture exports at @2x by default. 1920/768 condition screenshots are @1x. + // Detect: if width matches a known @1x size (1920, 768), use scale 1. Otherwise @2x. + const KNOWN_1X_WIDTHS = [1920, 768]; + const exportScale = KNOWN_1X_WIDTHS.includes(figmaWidth) ? 1 : 2; const logicalW = Math.max(1, Math.round(figmaWidth / exportScale)); const logicalH = Math.max(1, Math.round(figmaImage.height / exportScale)); diff --git a/src/agents/ablation/recompare.ts b/src/agents/ablation/recompare.ts new file mode 100644 index 00000000..d1df1db9 --- /dev/null +++ b/src/agents/ablation/recompare.ts @@ -0,0 +1,71 @@ +/** + * Re-render and re-compare existing baseline HTML against Figma screenshots. + * No API calls — only local rendering and pixel comparison. + * + * Usage: + * npx tsx src/agents/ablation/recompare.ts + * ABLATION_FIXTURES=desktop-product-detail npx tsx src/agents/ablation/recompare.ts + */ + +import { existsSync, readFileSync, writeFileSync, readdirSync } from "node:fs"; +import { resolve, join } from "node:path"; + +import { renderAndCompare, getFixtureScreenshotPath, DEFAULT_FIXTURES } from "./helpers.js"; + +const BASE_OUTPUT_DIR = resolve("data/ablation/phase1"); + +async function main(): Promise { + const fixtures = process.env["ABLATION_FIXTURES"] + ? process.env["ABLATION_FIXTURES"].split(",").map((s) => s.trim()).filter(Boolean) + : DEFAULT_FIXTURES; + + // Find all config versions + if (!existsSync(BASE_OUTPUT_DIR)) { + console.error("No ablation results found"); + process.exit(1); + } + + const versions = readdirSync(BASE_OUTPUT_DIR).filter((d) => + existsSync(join(BASE_OUTPUT_DIR, d)) + ); + + for (const version of versions) { + console.log(`\nConfig version: ${version}\n`); + + for (const fixture of fixtures) { + const typeDirs = join(BASE_OUTPUT_DIR, version, fixture); + if (!existsSync(typeDirs)) continue; + + const figmaPath = getFixtureScreenshotPath(fixture); + if (!existsSync(figmaPath)) { + console.log(` SKIP ${fixture}: no screenshot`); + continue; + } + + const types = readdirSync(typeDirs); + for (const type of types) { + const runDir = join(typeDirs, type, "run-0"); + const htmlPath = join(runDir, "output.html"); + if (!existsSync(htmlPath)) continue; + + console.log(` ${fixture}/${type}...`); + const result = await renderAndCompare(htmlPath, figmaPath, runDir, "base"); + + // Update result.json + const resultPath = join(runDir, "result.json"); + if (existsSync(resultPath)) { + const r = JSON.parse(readFileSync(resultPath, "utf-8")) as Record; + r["similarity"] = result.similarity; + writeFileSync(resultPath, JSON.stringify(r, null, 2)); + } + + console.log(` ✓ sim=${result.similarity.toFixed(1)}%`); + } + } + } +} + +main().catch((err) => { + console.error("Fatal:", err); + process.exit(1); +});