diff --git a/ATTRIBUTION.md b/ATTRIBUTION.md index 0b40635..4225310 100644 --- a/ATTRIBUTION.md +++ b/ATTRIBUTION.md @@ -13,7 +13,8 @@ MIT OR Apache-2.0. No third-party icon sets are used. |---|---|---|---|---| | `assets/app-icon/` (all files: `figcraft-*.png`, `figcraft.ico`, `hicolor/*/apps/ai.storyteller.figcraft.png`) | FigCraft contributors | Generated by `cargo xtask icon` (`xtask/src/icon.rs`) with FigCraft's own renderer | MIT OR Apache-2.0 | Original geometric mark (stacked layer cards and a cursor) | | `docs/brand/artcraft-logo.svg`, `docs/brand/artcraft-logo.png`, `docs/brand/artcraft-logo-white.svg`, `docs/brand/artcraft-logo-white.png`, `docs/brand/artcraft-mark.svg`, `docs/brand/artcraft-mark.png`, `docs/brand/artcraft-mark-black.svg`, `docs/brand/artcraft-mark-black.png` | ArtCraft Team | storytold/craftrules `assets/brand/` | ArtCraft brand terms (`docs/brand/LICENSE-brand.txt`), not open source | Trademarks; unmodified use within FigCraft only | -| `docs/images/` (all screenshots) | FigCraft contributors | Screenshots of FigCraft showing synthetic demo documents made in FigCraft | MIT OR Apache-2.0 | No third-party artwork | +| `docs/images/` (all screenshots and exports: `shot-*.png`, `art-*.png`) | FigCraft contributors | Screenshots of FigCraft showing synthetic demo documents made in FigCraft, and PNG exports of those documents by FigCraft's renderer | MIT OR Apache-2.0 | No third-party artwork | +| `examples/*.figcraft` | FigCraft contributors | Synthetic demo documents built through FigCraft's command API; invented copy, shapes and vectors drawn from scratch, no images or embedded fonts | MIT OR Apache-2.0 | Text uses Inter (OFL, from craft-fonts or the system); no third-party artwork | ## Fonts (build input, not in this repository) diff --git a/README.md b/README.md index 96b7557..847f63a 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,20 @@
+

+ FigCraft in its dark theme editing the Ridgeline hiking app: three phone screens (Home in light mode, a trail detail page and Home in dark mode) on the canvas, the Featured trail card instance selected, the layers panel showing the screen's auto layout tree, and the Design panel showing the instance's Fill and Hug auto layout sizing, its Theme variable mode and a fill bound to the surface colour variable +
Ridgeline: auto layout screens built from components, with Light and Dark modes from one set of colour variables · examples/ridgeline-app.figcraft +

+ +
+ > [!NOTE] > **ArtCraft is a community of artists from all walks of life.** Designers, illustrators, developers, > musicians, game makers — if you make things, you're one of us. **[Come say hi on Discord](https://discord.gg/artcraft).**

+ A look around · + Made in FigCraft · Features · Agents · Under the hood · @@ -72,6 +81,86 @@
+## A look around + + + + + + + + + + + + + + +
+ The Ridgeline UI design system open with the Assets panel on the left showing live thumbnails of the Button, Difficulty, Search field, Toggle and icon components; a Button component set of nine variants laid out in a three-by-three grid auto layout is selected, and the Design panel lists its Style (Primary, Tonal, Outline) and State (Default, Hover, Disabled) variant properties +

Components and variants: component sets, variant properties and the Assets panel · examples/ridgeline-design-system.figcraft

+		 + Four onboarding phone screens in the Prototype tab, joined by blue connection curves from the Get started, Continue, Allow location and Not now buttons to the next screens; the Get started button is selected and the Prototype panel shows its On click, Navigate to 2 Interests interaction +

Prototyping: connections, transitions, back actions and a flow · examples/ridgeline-onboarding.figcraft

+
+ Dev Mode on the Ridgeline home screen: the frame carries a Ready for dev badge, a Development annotation callout points at the featured trail card, a trail row instance is selected and the Inspect panel shows generated React code with a TrailRow props interface and the instance's title and details values +

Dev Mode: ready-for-dev status, annotations and React code where component properties become props · examples/ridgeline-app.figcraft

+		 + Vector edit mode on a wave path with a gradient, tapered variable-width stroke: its anchor points, Bezier handles and the transform box of the selected points are visible, with the vector edit toolbar at the bottom; above it are a boolean-built mountain mark and an angular-gradient knot of excluded rings +

Vector networks: points and handles, variable-width strokes, booleans that stay editable · examples/glass-and-vectors.figcraft

+
+ The light UI theme with a web analytics dashboard for a fictional trail operator: a dark sidebar, KPI cards with sparklines, a grouped bar chart, a donut chart, a table of top trails and an area chart, with the frame's 12-column layout grid showing as tinted columns and its fill linked to a paint style +

Layout grids and styles, light theme: a 12-column grid, paint, text, effect and grid styles, charts drawn from shapes · examples/ridgeline-studio-dashboard.figcraft

+		 + A live session seen from one participant's window: avatars of three people in the top right, a Priya Nair is spotlighting banner with a Follow button, Priya's green cursor and selection outline on the dark home screen's trail card, and Jonas Ortiz's purple cursor and selection on the Start hike button with his cursor chat bubble asking whether the button should stay pinned while scrolling +

Live sessions: three apps on one figcraft-server file, with cursors, selections, cursor chat and spotlight

+
+ +## Made in FigCraft + +Every design below was built entirely through FigCraft's command API, the same one the MCP server +exposes to agents, and exported at 2x by FigCraft's own renderer. The source files are in +[`examples/`](examples). + + + + + + + + + + + + + + + + + +
+ Ridgeline home screen in light mode: a greeting, a search field, filter chips, a featured trail card with an illustrated mountain landscape, a list of nearby trails and a translucent tab bar +

Home, light

+		 + Ridgeline trail detail screen: a dusk mountain illustration with glass buttons, a sheet with difficulty tags, the trail name, distance, elevation and duration stats, an elevation profile chart and a Start hike button +

Trail detail

+		 + The same Ridgeline home screen in dark mode, its colours switched by the Theme variable collection's Dark mode +

Home, dark: the same frame in the Dark mode

+
+ Ridgeline Studio dashboard: a dark navy sidebar with navigation, KPI cards for active hikers, check-ins, average rating and open incidents with sparklines, a hikes-per-day grouped bar chart with a tooltip, a difficulty donut chart, a top trails table with condition badges and a visitors area chart +

Ridgeline Studio: a desktop dashboard on a 12-column grid, every chart made of shapes and vectors

+
+ A glass weather widget over blurred teal, violet, rose and orange colour fields: a frosted card for Lake Louise showing 14 degrees and partly cloudy with a gradient sun behind a boolean-union cloud, an hourly forecast row, and smaller glass cards for air quality, wind and humidity +

Glass weather: glass and background blur, layer-blurred colour fields, a boolean cloud

+		 + Three tiles on a cream background: a gradient mountain mark made by unioning two peaks and subtracting a sun, a knot of three excluded rings with an angular gradient, and a tapered gradient wave with a leaf and a glowing four-point star +

Vector marks: union, subtract and exclude, an angular gradient, a variable-width stroke

+
+ Ridgeline UI colour ramps: six swatches each of Pine greens, Sunset oranges and Slate greys, each labelled with its name and hex value +

Ridgeline UI: colour ramps where every swatch is a paint style, exported through a slice

+
+ ## Features diff --git a/docs/images/art-app-home-dark.png b/docs/images/art-app-home-dark.png new file mode 100644 index 0000000..bbfcfa8 Binary files /dev/null and b/docs/images/art-app-home-dark.png differ diff --git a/docs/images/art-app-home.png b/docs/images/art-app-home.png new file mode 100644 index 0000000..1931377 Binary files /dev/null and b/docs/images/art-app-home.png differ diff --git a/docs/images/art-app-trail.png b/docs/images/art-app-trail.png new file mode 100644 index 0000000..62d1c17 Binary files /dev/null and b/docs/images/art-app-trail.png differ diff --git a/docs/images/art-dashboard.png b/docs/images/art-dashboard.png new file mode 100644 index 0000000..05fbc7c Binary files /dev/null and b/docs/images/art-dashboard.png differ diff --git a/docs/images/art-ds-colour.png b/docs/images/art-ds-colour.png new file mode 100644 index 0000000..6c2defe Binary files /dev/null and b/docs/images/art-ds-colour.png differ diff --git a/docs/images/art-glass-weather.png b/docs/images/art-glass-weather.png new file mode 100644 index 0000000..1f14072 Binary files /dev/null and b/docs/images/art-glass-weather.png differ diff --git a/docs/images/art-vector-marks.png b/docs/images/art-vector-marks.png new file mode 100644 index 0000000..283c816 Binary files /dev/null and b/docs/images/art-vector-marks.png differ diff --git a/docs/images/shot-1-hero.png b/docs/images/shot-1-hero.png new file mode 100644 index 0000000..4d2da6a Binary files /dev/null and b/docs/images/shot-1-hero.png differ diff --git a/docs/images/shot-2-components.png b/docs/images/shot-2-components.png new file mode 100644 index 0000000..d999d89 Binary files /dev/null and b/docs/images/shot-2-components.png differ diff --git a/docs/images/shot-3-prototype.png b/docs/images/shot-3-prototype.png new file mode 100644 index 0000000..4345f5d Binary files /dev/null and b/docs/images/shot-3-prototype.png differ diff --git a/docs/images/shot-4-devmode.png b/docs/images/shot-4-devmode.png new file mode 100644 index 0000000..517d765 Binary files /dev/null and b/docs/images/shot-4-devmode.png differ diff --git a/docs/images/shot-5-vector.png b/docs/images/shot-5-vector.png new file mode 100644 index 0000000..5989c81 Binary files /dev/null and b/docs/images/shot-5-vector.png differ diff --git a/docs/images/shot-6-dashboard-light.png b/docs/images/shot-6-dashboard-light.png new file mode 100644 index 0000000..7309322 Binary files /dev/null and b/docs/images/shot-6-dashboard-light.png differ diff --git a/docs/images/shot-7-collab.png b/docs/images/shot-7-collab.png new file mode 100644 index 0000000..e78d053 Binary files /dev/null and b/docs/images/shot-7-collab.png differ diff --git a/examples/glass-and-vectors.figcraft b/examples/glass-and-vectors.figcraft new file mode 100644 index 0000000..38f8c1d Binary files /dev/null and b/examples/glass-and-vectors.figcraft differ diff --git a/examples/ridgeline-app.figcraft b/examples/ridgeline-app.figcraft new file mode 100644 index 0000000..6aac2d8 Binary files /dev/null and b/examples/ridgeline-app.figcraft differ diff --git a/examples/ridgeline-design-system.figcraft b/examples/ridgeline-design-system.figcraft new file mode 100644 index 0000000..48b3c1b Binary files /dev/null and b/examples/ridgeline-design-system.figcraft differ diff --git a/examples/ridgeline-onboarding.figcraft b/examples/ridgeline-onboarding.figcraft new file mode 100644 index 0000000..23492c0 Binary files /dev/null and b/examples/ridgeline-onboarding.figcraft differ diff --git a/examples/ridgeline-studio-dashboard.figcraft b/examples/ridgeline-studio-dashboard.figcraft new file mode 100644 index 0000000..c09f869 Binary files /dev/null and b/examples/ridgeline-studio-dashboard.figcraft differ