Teko Design UI Preview
Preview, inspect, and collaborate on UI pages built from .tekodesign.json files — directly inside VS Code.
Features
- Live preview — render UI from
.tekodesign.json instantly; hot-reloads on every save
- Theme token system — colors, spacing, radius, typography, button variants resolved from
theme
- Click to comment — click any component to open a review thread; comments are saved back into the file
- Conversation panel — view all open threads; navigate to any flagged component
- AI-friendly workflow — designed to work with LLM-generated UI via the
teko-design-ui Claude Code skill
Getting Started
1. Create a page file
Create a file named *.tekodesign.json with the following structure:
{
"type": "Page",
"theme": {
"maxWidth": 1232,
"colors": {
"primary": { "bg": "#ede9fe", "border": "#c4b5fd", "base": "#7c3aed", "dark": "#5b21b6", "text": "#7c3aed" },
"neutral": { "white": "#ffffff", "bg": "#f9fafb", "bgContainer": "#ffffff", "border": "#e5e7eb", "text": "#111827", "muted": "#9ca3af", "dark": "#0f172a" }
},
"spacing": { "sm": 8, "md": 16, "lg": 24, "xl": 32, "2xl": 48 },
"radius": { "sm": 4, "md": 8, "lg": 12, "full": 9999 }
},
"children": [
{
"type": "Section",
"bg": "neutral.dark",
"padding": ["spacing.2xl", "spacing.md"],
"layout": "full",
"children": [
{
"type": "Column", "width": "full",
"children": [
{ "type": "Heading", "level": 1, "value": "Hello World", "color": "neutral.white", "align": "center" },
{ "type": "Spacer", "size": "spacing.lg" },
{ "type": "Button", "id": "cta_button", "label": "Get Started", "variant": "primary" }
]
}
]
}
]
}
2. Open preview
- Right-click the file → Teko Design UI: Preview
- Or open Command Palette (
⌘⇧P) → Teko Design UI: Preview
Page Hierarchy
Page
└── Section
└── Column
└── Heading | Text | Button | Image | Spacer | Divider | Logo
| Card | Input | Textarea | Select | Checkbox
| Accordion | Tab | Menu
Supported Components
| Component |
Description |
Section |
Full-width or fixed-width layout block |
Column |
Flex column, supports fractional widths (1/2, 1/3, etc.) |
Heading |
H1–H5 with color and alignment |
Text |
Body text with size, weight, color tokens |
Button |
Primary / secondary / outline / ghost variants |
Image |
Responsive image |
Logo |
Brand logo with fixed width |
Spacer |
Vertical spacing via token or px |
Divider |
Horizontal rule |
Card |
Styled container with shadow, radius, border |
Input |
Text field with label, placeholder, types |
Textarea |
Multi-line text field |
Select |
Dropdown with options |
Checkbox |
Checkbox with label |
Accordion |
Collapsible FAQ-style items |
Tab |
Tabbed content panels |
Menu |
Navigation bar with left/right slots |
Collaboration
- Hover over any component to see its type and id
- Click to open a comment thread on that component
- 💬 (bottom-left) to add a page-level comment
- All threads are saved back into
conversations[] in the .tekodesign.json file
To apply feedback with AI:
/teko-design-ui examples/mypage.tekodesign.json
The skill reads all unresolved conversations and patches the file.
Development
# Build the preview app
cd preview-app && npm install && npm run build
# Build the extension
cd vscode-extension && npm install && npm run build
# Launch in VS Code
F5
After any change to the preview app, re-run npm run build in preview-app/ and reload the Extension Development Host (⌘R).
License
MIT
