tegwick
319dd00465
Ran authenticated extract against coulomb.social; session metadata matched anonymous Bubble defaults, so treat docs/design-extract as a public shell baseline (PROVENANCE.md). Capture script now refuses to overwrite storage-state.json with thin anonymous sessions.
120 lines
2.8 KiB
Markdown
120 lines
2.8 KiB
Markdown
# Prompt pack
|
|
|
|
Paste-ready prompts for coulomb.social. Use the variant that matches your tool.
|
|
|
|
## v0.txt
|
|
|
|
```
|
|
Build a landing page with this exact visual language.
|
|
COLORS:
|
|
#000000
|
|
#171717
|
|
#d08728
|
|
#ffffff
|
|
#616161
|
|
#e5e5e5
|
|
FONTS: [object Object], [object Object], [object Object], [object Object]
|
|
SPACING: 2, 32, 68
|
|
RADIUS: 4, 8
|
|
SHADOWS: rgb(97, 97, 97) 2px 2px 8px 0px
|
|
MATERIAL LANGUAGE: flat
|
|
VOICE: Tone: neutral · Headings: unknown
|
|
SECTIONS (in order):
|
|
- hero
|
|
- features
|
|
- cta
|
|
- footer
|
|
Use Tailwind. Match these tokens exactly. Keep the material language consistent.
|
|
```
|
|
|
|
## lovable.txt
|
|
|
|
```
|
|
Clone the design language of this landing page and build a fresh equivalent.
|
|
Visual feel: flat. Tone: neutral · Headings: unknown
|
|
Primary palette: #000000, #171717, #d08728, #ffffff, #616161.
|
|
Typography: [object Object], [object Object], [object Object], [object Object].
|
|
Corner radius vocabulary: 4, 8.
|
|
Shadow vocabulary: rgb(97, 97, 97) 2px 2px 8px 0px.
|
|
Page structure:
|
|
- hero
|
|
- features
|
|
- social proof
|
|
- cta
|
|
- footer
|
|
```
|
|
|
|
## cursor.md
|
|
|
|
```
|
|
# Design brief
|
|
Page type: **landing**.
|
|
Material language: **flat**.
|
|
Voice: Tone: neutral · Headings: unknown.
|
|
## Tokens
|
|
```ts
|
|
export const tokens = {
|
|
colors: ['#000000', '#171717', '#d08728', '#ffffff', '#616161', '#e5e5e5'],
|
|
fonts: ['[object Object]', '[object Object]', '[object Object]', '[object Object]'],
|
|
radii: ['4', '8'],
|
|
shadows: ['rgb(97, 97, 97) 2px 2px 8px 0px'],
|
|
};
|
|
```
|
|
## Sections
|
|
- hero
|
|
- features
|
|
- cta
|
|
- footer
|
|
```
|
|
|
|
## claude-artifacts.md
|
|
|
|
```
|
|
Create a React artifact that reproduces this brand's design language.
|
|
Page intent: landing.
|
|
Material language: flat.
|
|
Voice: Tone: neutral · Headings: unknown.
|
|
Colors to use: #000000, #171717, #d08728, #ffffff, #616161, #e5e5e5.
|
|
Fonts: [object Object], [object Object], [object Object], [object Object].
|
|
Radius vocabulary: 4, 8.
|
|
Sections:
|
|
- hero
|
|
- features
|
|
- cta
|
|
- footer
|
|
Use Tailwind via CDN, lucide-react for icons, and keep the material language consistent across sections. Do not add extra decorative elements outside this vocabulary.
|
|
```
|
|
|
|
## Recipes
|
|
|
|
### button
|
|
|
|
# Recipe: button
|
|
Build one button component that matches this brand.
|
|
Palette: #000000, #171717, #d08728, #ffffff, #616161, #e5e5e5
|
|
Typography: [object Object], [object Object], [object Object], [object Object]
|
|
Material: flat
|
|
Signals: Radius: 4, 8 · Shadows: rgb(97, 97, 97) 2px 2px 8px 0px
|
|
## Anatomy (detected)
|
|
```json
|
|
{
|
|
"kind": "button",
|
|
"structuralHash": "button>svg",
|
|
"instanceCount": 1,
|
|
"variants": [
|
|
{
|
|
"css": {
|
|
"background": "rgba(0, 0, 0, 0)",
|
|
"color": "rgb(208, 135, 40)",
|
|
"padding": "5px 5px 5px 5px",
|
|
"borderRadius": "4px",
|
|
"border": "0px none rgb(208, 135, 40)",
|
|
"fontSize": "13.3333px",
|
|
"fontWeight": "400"
|
|
},
|
|
"instanceCount": 1
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|