diff --git a/.gitignore b/.gitignore index 790b185..1752cef 100644 --- a/.gitignore +++ b/.gitignore @@ -26,5 +26,8 @@ yarn.lock # Husky build tracking (local only) .husky/.build-cache +# Editors / IDEs +.idea/ + # Claude Code local config .claude/ \ No newline at end of file diff --git a/blogs/blog/2026-08-05-speckit-figma-starter.mdx b/blogs/blog/2026-08-05-speckit-figma-starter.mdx new file mode 100644 index 0000000..6aa635d --- /dev/null +++ b/blogs/blog/2026-08-05-speckit-figma-starter.mdx @@ -0,0 +1,115 @@ +--- +title: "Spec Driven Development, Starting from Figma" +authors: [VibhuS] +--- + + + + + + + + + +--- + +**Spec Driven Development flips the usual vibe coding approach.** Instead of prompting your way straight to code, you get the spec right first — user stories, plan, tasks — and then let the LLM implement against it. + +--- + +{/* truncate */} + +## Spec Driven Development: the current scenario + +[SpecKit](https://github.com/github/spec-kit) is the open source tool built around this workflow. It provides a set of commands that give developers a way to build apps, sort of like how git commands are used to perform a PR workflow. The commands run in order to complete the workflow: + +```text +constitution → specify → plan → tasks → implement +``` + +In this realm, getting output fast is not the primary target — getting it right with a minimum number of iterations is. + +In enterprises, getting the UI output as a designer envisioned it is still a daunting task, and it is left on the developer's shoulders. You simply cannot prompt your way out and get the best finished output with maximum fidelity. Getting the layouts, design tokens, and interactions right is still done manually, even with an SDD approach. + +### Building multiple screens from Figma: what a developer has to take care of + +For a single screen, prompting can get you most of the way there. A real module is rarely one screen though — it's a flow of screens, and each one adds work that doesn't show up until you're doing it by hand: + +- **Components and variants** — which components repeat across screens, and what variants and states they need (hover, disabled, error), so you're not rebuilding the same button five different ways. +- **Design tokens** — colors, spacing, and typography pulled once and applied consistently, not eyeballed per screen. +- **Icons and images** — every icon and embedded image exported and wired in, screen by screen. +- **Screen-to-screen flow** — which tap or action goes where. Get this wrong and the "working" screens don't add up to a working flow. +- **Build order** — what to build first, so later screens aren't blocked on ones you haven't gotten to yet. + +Multiply this across every screen in the section, and "just prompt it" stops working. Unless you're supergood at prompting and have the time to spell all of this out yourself — for every screen — you end up doing multiple passes to fix the gaps. Which is exactly the extra iteration SDD is supposed to save you from. + +![A Figma section showing an onboarding module: sign in, create account, verify email, profile setup, team invite, dashboard, and account settings screens, connected by prototype links](./assets/img/figma-module-flow.png) +*Simple module flow in Figma* + +--- + +## Introducing the SpecKit extension figma-starter + +We have published a new extension to SpecKit, [figma-starter](https://omnewave.github.io/spec-kit-figma-starter/). Just like SpecKit, this extension is framework and tech stack agnostic, which means any developer can use it in their dev cycle. + +--- + +## Why this extension + +The extension is a great starting point when it comes to implementing a new module in a greenfield or brownfield app. It fetches all the metadata a developer would need before starting UI development. + +--- + +## What the extension does + +The extension takes a Figma design section's URL as input, analyses the screens in the provided design section, establishes the correlation between the screens, and churns out user stories and page-level specs, ordered in a task order file. It also collects all the design system information such as design tokens, along with resources such as the icons and images used. + +```text +pull-screens → trace-flows → read-screens → write-spec +``` + +- **pull-screens** — section frames to PNGs, plus prototype taps, into `screens.json` +- **trace-flows** — builds the flow map (pages, dialogs, journeys) +- **read-screens** — layout notes per page, dialog, and step +- **write-spec** — `user-stories.md`, `build-order.md`, and one `spec.md` per screen + +--- + +## Workflow + +The extension adds a step to the existing SpecKit flow. The developer runs the `figma-starter.import` command and gets all the metadata and specs required to initiate spec driven development. This metadata then acts as the input to the existing SpecKit tasks. + +So instead of just prompting: + +> **"Build a Registration flow with a login page and a registration page"** + +and then manually reviewing and running clarify tasks, the developer prompts: + +> **"Here is the spec for the Registration flow along with all screens involved, plus the design tokens and required resources."** + +With this rich set of input, the LLM generates much more fine-tuned specs and tasks that need fewer iterations from the developer. + +```text +/speckit.constitution + ↓ +/speckit.figma-starter.import (this extension) + ↓ +/speckit.specify + ↓ +/speckit.plan → /speckit.tasks → /speckit.implement +``` + +--- + +## What next? + +- Add a **sync** command to the extension, which handles further modifications and additions in the Figma design and updates the existing specs and tasks. +- Add more input sources other than Figma — for example Claude design or screenshots. +- Add an **api-specgen** command to generate UI-to-API binding specs. + +--- + +## Resources + +- GitHub repo: [github.com/OmneWave/spec-kit-figma-starter](https://github.com/OmneWave/spec-kit-figma-starter) +- GitHub Pages: [omnewave.github.io/spec-kit-figma-starter](https://omnewave.github.io/spec-kit-figma-starter/) diff --git a/blogs/blog/assets/img/figma-module-flow.png b/blogs/blog/assets/img/figma-module-flow.png new file mode 100644 index 0000000..2586a15 Binary files /dev/null and b/blogs/blog/assets/img/figma-module-flow.png differ diff --git a/data/author/authors.yml b/data/author/authors.yml index a1d97c4..84c0b7d 100644 --- a/data/author/authors.yml +++ b/data/author/authors.yml @@ -46,6 +46,16 @@ deepikaSrimanthulaWavemaker: github: apitive linkedin: deepika-srimanthula-b54a9133 +VibhuS: + name: Vibhu Singhal + title: Sr Engineering Manager at WaveMaker + url: https://github.com/vibhus + image_url: https://github.com/vibhus.png + page: true + socials: + github: vibhus + linkedin: vibhu-singhal + # yangshun: # name: Yangshun Tay # title: Ex-Meta Staff Engineer, Co-founder GreatFrontEnd diff --git a/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx b/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx index 29933e2..8db8e2b 100644 --- a/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx +++ b/docs/release-notes/release-version-1/version-1-0-x/1.0.0-beta.mdx @@ -13,6 +13,28 @@ WaveMaker announces the release of WaveMaker AI 1.0.0 Beta. This release is inte For details about the technology stack upgrades, refer to [Technology Stack](/tech-stack). +## 1.0.0-BETA-RC8 + +*Release date: 03 August 2026* + + + + + + + + + + + + + + + + + + + ## 1.0.0-BETA-RC7 *Release date: 27 July 2026* diff --git a/package-lock.json b/package-lock.json index c34598d..c9f64b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -179,7 +179,6 @@ "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.48.0.tgz", "integrity": "sha512-RB9bKgYTVUiOcEb5bOcZ169jiiVW811dCsJoLT19DcbbFmU4QaK0ghSTssij35QBQ3SCOitXOUrHcGgNVwS7sQ==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/client-common": "5.48.0", "@algolia/requester-browser-xhr": "5.48.0", @@ -318,7 +317,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -2178,7 +2176,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -2201,7 +2198,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2311,7 +2307,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2733,7 +2728,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3721,7 +3715,6 @@ "integrity": "sha512-DEVIwhbrZZ4ir31X+qQNEQqDWkgCJUV6kiPPAd2MGTY8n5/n0c4B8qA5k1ipF2izwH00JEf0h6Daaut71zzkyw==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@docusaurus/types": "3.9.2", "@rspack/core": "^1.5.0", @@ -3893,7 +3886,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.9.2.tgz", "integrity": "sha512-C5wZsGuKTY8jEYsqdxhhFOe1ZDjH0uIYJ9T/jebHwkyxqnr4wW0jTkB72OMqNjsoQRcb0JN3PcSeTwFlVgzCZg==", "license": "MIT", - "peer": true, "dependencies": { "@docusaurus/core": "3.9.2", "@docusaurus/logger": "3.9.2", @@ -4405,13 +4397,15 @@ "version": "0.9.0", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@emotion/unitless": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@eslint-community/eslint-utils": { "version": "4.9.1", @@ -5705,7 +5699,6 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", - "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -6484,7 +6477,6 @@ "integrity": "sha512-Iax6UhrfZqJajA778c1d5DBFbSIqPOSrI34kpNIiNpWd8Jq7mFIa+Z60SQb5ZQDZuUxcCZikjz5BxinFjTkg7Q==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "@module-federation/runtime-tools": "0.22.0", "@rspack/binding": "1.7.6", @@ -6718,7 +6710,6 @@ "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -6824,7 +6815,6 @@ "devOptional": true, "hasInstallScript": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.25" @@ -7797,7 +7787,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -7908,7 +7897,8 @@ "version": "4.2.7", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.7.tgz", "integrity": "sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/supports-color": { "version": "8.1.3", @@ -8274,7 +8264,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -8351,7 +8340,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -8416,7 +8404,6 @@ "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.48.0.tgz", "integrity": "sha512-aD8EQC6KEman6/S79FtPdQmB7D4af/etcRL/KwiKFKgAE62iU8c5PeEQvpvIcBPurC3O/4Lj78nOl7ZcoazqSw==", "license": "MIT", - "peer": true, "dependencies": { "@algolia/abtesting": "1.14.0", "@algolia/client-abtesting": "5.48.0", @@ -8966,7 +8953,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -9136,6 +9122,7 @@ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -9990,7 +9977,6 @@ "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==", "hasInstallScript": true, "license": "MIT", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/core-js" @@ -10145,6 +10131,7 @@ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", "license": "ISC", + "peer": true, "engines": { "node": ">=4" } @@ -10215,7 +10202,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10346,6 +10332,7 @@ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", "license": "MIT", + "peer": true, "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", @@ -10546,7 +10533,6 @@ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz", "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10" } @@ -10968,7 +10954,6 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", - "peer": true, "engines": { "node": ">=12" } @@ -11707,7 +11692,6 @@ "integrity": "sha512-O0piBKY36YSJhlFSG8p9VUdPV/SxxS4FYDWVpr/9GJuMaepzwlf4J8I4ov1b+ySQfDTPhc3DtLaxcT1fN0yqCg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", @@ -18846,7 +18830,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -19750,7 +19733,6 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "license": "MIT", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -20636,7 +20618,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -20646,7 +20627,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -20702,7 +20682,6 @@ "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", "license": "MIT", - "peer": true, "dependencies": { "@types/react": "*" }, @@ -20758,7 +20737,6 @@ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -21708,7 +21686,6 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -22723,6 +22700,7 @@ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.3.9.tgz", "integrity": "sha512-J72R4ltw0UBVUlEjTzI0gg2STOqlI9JBhQOL4Dxt7aJOnnSesy0qJDn4PYfMCafk9cWOaVg129Pesl5o+DIh0Q==", "license": "MIT", + "peer": true, "dependencies": { "@emotion/is-prop-valid": "1.4.0", "@emotion/unitless": "0.10.0", @@ -22770,6 +22748,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.1", @@ -23147,8 +23126,7 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/tsutils": { "version": "3.21.0", @@ -24116,7 +24094,6 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.1.tgz", "integrity": "sha512-Gdj3X74CLJJ8zy4URmK42W7wTZUJrqL+z8nyGEr4dTN0kb3nVs+ZvjbTOqRYPD7qX4tUmwyHL9Q9K6T1seW6Yw==", "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", diff --git a/src/components/MDXComponents/Pills/Pills.css b/src/components/MDXComponents/Pills/Pills.css index 29b6516..988a103 100644 --- a/src/components/MDXComponents/Pills/Pills.css +++ b/src/components/MDXComponents/Pills/Pills.css @@ -85,7 +85,8 @@ --wm-pill-icon-color: rgba(0, 131, 143); } -.wm-pill-design { +.wm-pill-design, +.wm-pill-design-system { background: rgba(194, 24, 91, 0.2); color: rgba(194, 24, 91); --wm-pill-icon-color: rgba(194, 24, 91); @@ -131,6 +132,16 @@ color: rgb(200, 130, 0); } +.wm-pill-sdd { + background: rgba(103, 58, 183, 0.15); + color: rgb(103, 58, 183); +} + +.wm-pill-figma { + background: rgba(162, 89, 255, 0.15); + color: rgb(162, 89, 255); +} + /* PillGroup */ .wm-pill-group { display: flex; diff --git a/src/components/MDXComponents/Pills/Pills.jsx b/src/components/MDXComponents/Pills/Pills.jsx index 936ce8b..a95f04f 100644 --- a/src/components/MDXComponents/Pills/Pills.jsx +++ b/src/components/MDXComponents/Pills/Pills.jsx @@ -49,6 +49,9 @@ const pillConfig = { ai: { icon: null, label: 'Production AI' }, ragas: { icon: null, label: 'RAGAS' }, 'golden-datasets': { icon: null, label: 'Golden Datasets' }, + sdd: { icon: null, label: 'Spec Driven Development' }, + figma: { icon: null, label: 'Figma' }, + 'design-system': { icon: null, label: 'Design System' }, }; export function PillGroup({ children }) {