Design with AI

Ask any AI for a new look.

A Winkledor design is a short file of plain data, so any AI chat can change it for you: the colours of every hour, the light, the type, where things sit.

How

  1. In Winkledor, open the settings in the corner, then Design, then Copy for AI.
  2. Paste it into any AI chat and say what you would like: a deep ocean at night, softer mornings, a serif clock in the centre.
  3. Copy the reply and paste it into a new tab. Winkledor tries it on the page; keep it, or cancel.

Ask for more in the same chat and paste again. Whatever an AI writes is only data: Winkledor checks every value and draws it with its own code, so a design can never run anything, fetch anything or make your text hard to read.

What is shared

Copy for AI copies the design and the brief below, and nothing else: never your name, your links or your settings. Pictures and fonts stay on your device and are put back when you paste the reply. What you paste into an AI chat goes to that service, under its own terms; Winkledor itself sends nothing.

The brief

What Copy for AI puts before your design. It is written from the same rules Winkledor checks designs with, so it always matches. As plain text: winkledor.com/ai.txt. The format in full, as JSON Schema: winkledor.com/schema/design-1.json.

Read the brief

Winkledor is a new tab page for Chrome. Everything on it comes from one design: a JSON file of plain data that Winkledor checks and then draws. A design is never code. It has no scripts, expressions, HTML, CSS, SVG or web addresses, and anything that changes over the day is a list of keyframes that Winkledor eases between.

The format in full, as JSON Schema: https://winkledor.com/schema/design-1.json

How to answer

  • Reply with the whole design as one JSON code block: valid JSON, with no comments, no trailing commas and nothing left out.
  • Change what was asked for and keep everything else as it is.
  • Give a new design its own "name" (Title Case, up to 32 characters) and an "id" of "my/" and the name in lowercase words joined by hyphens, such as "my/deep-ocean". Keep that name and id when asked for more changes to the same design.
  • Keep "winkledor": 1, "version", "license" and any "basedOn" as they are. Leave out "author".
  • Write colours as "#rrggbb" in lowercase. Stay within the ranges below: a number outside its range is clamped, and an unknown field is dropped.
  • "options" are choices the person makes in Winkledor (Open Sky offers Sky and Layout). The first choice of each is in effect until they pick another, and its "set" is applied over the rest of the design, so it wins. To change something an option sets, change the option too: put the wanted choice first, with "set": {}, and give each other choice a "set" that makes its own change.
  • Pictures and fonts are left out to keep the design short: each entry in "assets" has "data": "". Keep those entries exactly as they are and use them by name; Winkledor puts the data back. New pictures and fonts cannot be written here; the person adds their own in Winkledor.
  • Any colours are allowed. Winkledor keeps text readable by itself: it picks dark or light text from whatever is behind it, and adds a soft veil behind the text when neither would do.

Time of day

Every "at" is an hour on a canonical day, in decimal hours (17.75 is 17:45): first light 5.25, sunrise 6.35, sunset 19, last light 20.1. Winkledor maps the real sunrise and sunset wherever the person is onto this day, so a keyframe at 19 always means sunset. Between keyframes everything eases smoothly, around midnight too. Name keyframes for their moment, such as "Golden Hour".

The parts of a design

Layers draw the background, bottom first: at most 4 layers, of which 1 is a sky. Components draw on top, at most 6, each in one slot of the layout. Every layer and component has a "type" (such as "sky@1") and an "id" (a lowercase word, which changes and options use to point at it). A component also has a "slot", the name of a slot in the layout, and may have a "style" of its own:

  • font: one of "system", "serif", "rounded", "mono", "geometric", "humanist", "classic", "didone", "slab", or "asset:<name>". A font family every computer has, or "asset:<name>" for a font file in the design's assets.
  • scale: number 0.5 to 2.5. Size, relative to the design's.
  • weight: number 200 to 700.
  • tracking: number -0.05 to 0.15. Letter spacing, in em.
  • hide: true or false. Not shown in this design.

Layers

sky@1

A sky drawn with light: colours and a glowing light for each time of day, eased between, with grain and slow movement.

  • palette: 2 to 24 entries, each with the fields below. The day as keyframes. The sky eases between neighbours, so a keyframe is never a hard boundary.
    • at: number 0 to 23.99 (default 12). Hour on the canonical day: first light 5.25, sunrise 6.35, sunset 19, last light 20.1.
    • name: text, up to 24 characters (default ""). Title Case, e.g. "Golden Hour".
    • zenith: colour "#rrggbb" (default "#f6f9fb"). Top of the sky. Most of the screen is this colour.
    • horizon: colour "#rrggbb" (default "#fbfaf4"). Bottom of the sky, before any light is added.
    • glow: colour "#rrggbb" (default "#ffd95c"). Core of the light.
    • halo: colour "#rrggbb" (default "#fdeec0"). Wide wash around the light; what the core fades through.
    • light: [number -0.5 to 1.5, number -1 to 1.5]. The light's centre: x from the left edge (0 to 1), y in screen heights from the bottom (negative is below the screen).
    • radius: number 0.2 to 3 (default 0.92). The glow's size in screen heights.
    • intensity: number 0 to 1.5 (default 1). How far the light colours push into the sky.
    • grain: number 0 to 0.08 (default 0.01). Film grain amplitude.
    • motion: number 0 to 1.5 (default 1). Drift and breathing at this hour; nights are calmer.
  • character: one of "natural", "pastel", "mono" (default "natural"). Natural as drawn; Pastel lifts and softens; Mono keeps only lightness.
  • field:
    • horizonReach: number 0.05 to 1 (default 0.62). How much of the screen, from the bottom, the horizon tint reaches.
    • haloFalloff: number 0.5 to 12 (default 2.4). Falloff of the wide halo. Larger is tighter.
    • glowFalloff: number 0.5 to 16 (default 4.2). Falloff of the core. Larger is tighter.
    • haloMix: number 0 to 1 (default 0.88). How far the halo may push the sky towards its colour.
    • stretchBase: number 0.4 to 3 (default 0.95). Horizontal stretch of the light.
    • stretchPerAspect: number 0 to 1 (default 0.24). Extra stretch on wide screens.
  • wave:
    • drift: [number 0 to 0.1, number 0 to 0.1]. How far the light drifts, as a share of the screen.
    • breathe: number 0 to 0.1 (default 0.028). How much the light grows and shrinks.
    • warp: number 0 to 0.6 (default 0.28). How much slow noise bends the light's outline.
  • fixedLight: Hold the light in one place all day instead of following the palette.
    • at: [number -0.5 to 1.5, number -1 to 1.5].
    • radius: number 0.2 to 3 (default 0.86).
  • weather: true or false (default true). Let the weather change the light, when the person has turned weather on.

image@1

A picture from the design's assets, or one per time of day, full screen or placed, blended over the layers below.

  • src: asset name. The picture, by asset name. Or use schedule.
  • schedule: 0 to 12 entries, each with the fields below. A picture per time of day: each takes over at its hour on the canonical day.
    • at: number 0 to 23.99 (default 12).
    • src: asset name. The name of a picture in the design's assets.
  • fade: number 0 to 6 (default 1). Hours either side of each change in the schedule over which pictures crossfade.
  • fit: one of "cover", "contain" (default "cover"). cover fills the screen; contain places the whole picture at the anchor.
  • anchor: one of "top-left", "top", "top-right", "left", "centre", "right", "bottom-left", "bottom", "bottom-right" (default "centre"). Where a contained picture sits.
  • scale: number 0.1 to 1 (default 0.5). A contained picture's size, as a share of the screen's shorter side.
  • opacity: number 0 to 1 (default 1).
  • blend: one of "normal", "multiply", "screen", "soft-light", "overlay" (default "normal"). How the picture combines with the layers below.
  • hover: asset name. A picture shown while the pointer is over a contained picture.
  • dim: one of "darken", "keep" (default "darken"). Whether the picture darkens with dimmed daylight.

Components

greeting@1

"Good morning" and so on, with the person's name if they gave one. The words are Winkledor's own.

It has no fields of its own; a design only places it.

clock@1

The time, and the date if wanted. 12 or 24 hours is the person's setting.

  • date: true or false (default true). Show the date beside the time.

links@1

The person's quick links as one small row, if they turned links on. The links are theirs, never the design's.

It has no fields of its own; a design only places it.

The rest of the design

  • name: text, up to 32 characters. Title Case.
  • description: text, up to 140 characters. Sentence case.
  • layout: one of "corner", "centre", or an object with the fields below (default "corner"). A preset, or slots of your own. "corner" has "main" (bottom-left) and "top" (top-right); "centre" has "main" (centre) and "top" (top-right).
    • slots: named entries, up to 4, each with the fields below.
      • anchor: one of "top-left", "top", "top-right", "left", "centre", "right", "bottom-left", "bottom". Where the slot sits; bottom-right is kept for the settings control.
      • sample: one of "box", "zone" (default "box"). Where text colour is judged from: box, what is behind the text; zone, a fixed area around the anchor, for content that grows.
  • type:
    • font: one of "system", "serif", "rounded", "mono", "geometric", "humanist", "classic", "didone", "slab", or "asset:<name>" (default "system"). A font family every computer has, or "asset:<name>" for a font file in the design's assets.
    • hero: The headline of each slot: the greeting, or the time when it stands alone.
      • size:
        • min: number 0 to 200 (default 32). Pixels, on the smallest screens.
        • fluid: [number 0 to 10, number -50 to 100]. In between: a share of the screen width (in vw) plus pixels.
        • max: number 0 to 240 (default 66). Pixels, on the largest screens.
      • weight: number 200 to 700 (default 300).
      • tracking: number -0.05 to 0.15 (default -0.024). Letter spacing, in em.
    • meta: Everything else: the date, the time under a greeting, links.
      • size:
        • min: number 0 to 200 (default 14). Pixels, on the smallest screens.
        • fluid: [number 0 to 10, number -50 to 100]. In between: a share of the screen width (in vw) plus pixels.
        • max: number 0 to 240 (default 18). Pixels, on the largest screens.
      • weight: number 200 to 700 (default 400).
    • edge: How far text sits from the edges of the screen.
      • min: number 0 to 200 (default 24). Pixels, on the smallest screens.
      • fluid: [number 0 to 10, number -50 to 100]. In between: a share of the screen width (in vw) plus pixels.
      • max: number 0 to 240 (default 64). Pixels, on the largest screens.
  • motion:
    • style: one of "rise", "fade", "slide", "blur", "letters" (default "rise"). How text arrives and leaves: rise (up out of a slight blur), fade, slide (in from the side), blur, or letters (one after another).
    • arrive: number 0 to 2000 (default 720). Milliseconds for text to arrive.
    • leave: number 0 to 1200 (default 340). Milliseconds for text to leave.
    • stagger: number 0 to 300 (default 70). Milliseconds between one line and the next.
    • rise: number 0 to 24 (default 6). Pixels text travels as it arrives.
    • blur: number 0 to 12 (default 5). Pixels of blur text arrives out of.
    • easeArrive: [number 0 to 1, number -1 to 2, number 0 to 1, number -1 to 2]. A cubic Bezier easing, [x1, y1, x2, y2].
    • easeLeave: [number 0 to 1, number -1 to 2, number 0 to 1, number -1 to 2]. A cubic Bezier easing, [x1, y1, x2, y2].
  • ink:
    • dark: number 0 to 0.3 (default 0.22). Lightness of dark text, 0 black to 1 white.
    • light: number 0.9 to 1 (default 0.985). Lightness of light text.
    • minContrast: number 4.6 to 7 (default 4.6). The least contrast text may have against what is behind it; never below 4.6.
    • tint: colour "#rrggbb". A colour to lean the text towards.
    • tintAmount: number 0 to 1 (default 0.6). How far towards the tint, before the contrast floor has its say.
  • options: 0 to 3 entries, each with the fields below. Short rows the design offers in the settings panel. The first choice is the default.
    • id: a lowercase word.
    • label: text, up to 12 characters. Title Case.
    • choices: 2 to 4 entries, each with the fields below.
      • id: a lowercase word.
      • label: text, up to 12 characters.
      • set: Paths in this design to new values, e.g. { "layers.sky.character": "mono" }.

A choice's "set" uses paths through the design, with layers and components named by id, such as "layers.sky.character" or "components.clock.style.font". A choice can never change "id", "version", "license", "author", "basedOn", "assets" or "options".