# Interactive prototypes with AI and the SBB Design System. Early Access # Interactive prototypes with AI and the SBB Design System. Describe your idea and see it as a clickable Lyne prototype. Skills turn GitHub Copilot into an assistant that knows Lyne, the SBB icons and Figma. **For SBB employees only.** Installation runs over the internal SBB network or VPN with your SBB account. External partners cannot use the skills. Everyone can do this: with the [llms.txt](https://digital.sbb.ch/llms.txt), your AI assistant knows Lyne and the SBB Design System, all components, their API and typical pitfalls, even without the skills. ## What are skills? ### Skills. Skills are abilities that extend GitHub Copilot with Lyne, the SBB icons and Figma. Your assistant then knows the SBB Design System and works with it. ### The toolkit. The toolkit is the collection of these skills. You install it once on your computer. ### Your benefit. With every update, you benefit from improvements and new skills. You update everything at once. ## What the skills can do. #### From idea to prototype. #### From idea to prototype. Describe in the chat what you need, and the assistant builds a clickable prototype from real Lyne components: in the SBB look, with dark mode and accessibility from the start. You quickly have something in your hands that you can show and discuss. #### What you show can be built. #### What you show can be built. The AI knows the possibilities and the limits of Lyne. Your prototype therefore shows only what can also be implemented in development. The discussion «It works in Figma, so why not in development?» no longer applies. #### Lyne-compliant from the first line. #### Lyne-compliant from the first line. The included starter sets up your project so that components, design tokens and themes are integrated correctly from the start. Your prototype stands on the same foundation as later products and does not have to be rebuilt first. #### Your Figma designs, implemented. #### Your Figma designs, implemented. The assistant reads your Figma designs and implements them with Lyne components. You set up the connection once, and the onboarding guides you step by step. ## Design Studio & Skills. Planning a design studio? This is where the skills play to their strengths. The sketching round stays as it is: quick and rough. Afterwards, you turn the favourites into clickable prototypes that you can test with users. #### 1\. Sketch. As usual: the team sketches many ideas quickly and roughly. The skills are deliberately not used here yet, so that the variety of ideas does not suffer. #### 2\. Build prototypes. From the two or three favourites, the skills create clickable prototypes from real Lyne components. They feel real and can be tested right away. #### 3\. Test. The prototypes go straight into testing with users. And because the prototypes are built with Lyne, you immediately see what can be implemented. ## Ready in 3 steps. 1. **Prepare.** You need the SBB network or VPN, a computer with macOS or Windows with WSL, and [VS Code](https://code.visualstudio.com/download) with the [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) extension (on a Mac, alternatively the [Copilot App](https://docs.github.com/en/copilot/get-started/quickstart-copilot-app)) and [Node.js](https://nodejs.org/en/download). Nothing else. 2. **Install.** The guide takes you step by step from zero to your first task. Allow about 30 minutes, and you do most steps only once per computer. 3. **Get started.** Write «Set up the UX toolkit.» in the chat and off you go: the assistant shows you what the skills can do and asks about Figma and a folder for your prototypes. [Guide (SBB network/VPN only)](https://code.sbb.ch/projects/KD_UX/repos/ux-toolkit/browse/docs/installation.en.md) ## Frequently asked questions. What are skills? Skills are abilities that extend GitHub Copilot with Lyne, the SBB icons and Figma. The toolkit bundles them: you install it once and benefit from all improvements and new skills. Do I need programming skills? No, you do not need any programming skills at all. The assistant builds the prototypes for you, and the guide explains every installation step from scratch. Do I need Figma? No, the Figma connection is optional. If you do not work with Figma, you skip this step. Does the toolkit also run on Windows? Yes, on Windows it runs through WSL (Windows Subsystem for Linux), not in PowerShell. The guide contains the matching steps. What is the working folder? The working folder is the home of the toolkit on your computer. It contains the skills and defines which version is installed. The assistant only knows the skills if you open exactly this folder in VS Code or the Copilot App. Your prototypes are not stored in it but in a place you choose during onboarding. This way you can update the toolkit at any time without affecting existing prototypes. Can the prototypes be used in production? Prototypes are made to show and align ideas, not for production use. How do I stay up to date? For small updates, the assistant suggests them itself at the start of a session. For major updates, we will inform you. Prototypes remain unchanged. Where do I give feedback? The assistant asks for it during onboarding. You can also [contact us directly](mailto:ux@sbb.ch?subject=Skills%3A%20Feedback%20from%20FAQ). ## Moving forward together. ## Early Access. You are on board from the start: the skills are new and grow with your [feedback](mailto:ux@sbb.ch?subject=Skills%3A%20Feedback%20from%20Early%20Access). We are open about what already works well and what does not yet. ## Platforms. The toolkit runs on macOS and Windows (via WSL) and works with VS Code and GitHub Copilot. On a Mac, it also works with the Copilot App. ## Ongoing updates. Every update makes the skills better and adds new ones. Stay up to date and benefit from what we keep learning. ## Tell us what you need. - [Feedback and wishes](mailto:ux@sbb.ch?subject=Skills%3A%20Feedback%20from%20contact%20card) - [Advice and support](mailto:ux@sbb.ch?subject=Skills%3A%20Support%20from%20contact%20card) - [See the skills live](mailto:ux@sbb.ch?subject=Skills%3A%20Book%20a%20demo) --- Source: https://digital.sbb.ch/en/design-system/getting-started/skills/