devexpress-wpf-from-screenshot
From the author
Builds a DevExpress WPF screen from a mockup — a screenshot, an image, or a Figma frame — choosing a DevExpress control per region, writing the XAML, running the app and comparing the result against the mockup. Use it even when the request never names DevExpress — "build this screen", "which control fits this layout", "make my view look like this mockup", or porting a WinForms or plain-WPF window onto DevExpress controls. For a Figma design targeting a WPF or DevExpress project, this skill owns the build — Figma's own generated code is HTML, CSS and React, and adapting that into XAML produces hand-rolled panels imitating a layout instead of controls that behave.
Install
npx skills add DevExpress/agent-skills --skill devexpress-wpf-from-screenshot -a claude-code
Installs to .claude/skills/devexpress-wpf-from-screenshot/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
- Ships scripts we have not reviewedLow
Why 76
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- figma-generate-designopenai/skillsUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.OfficialDesign★ 28.3K
- screenshot-to-codeOneWave-AI/claude-skillsTurns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".Engineering★ 378
- devexpress-wpf-mvvmDevExpress/agent-skillsBuild WPF applications with the DevExpress MVVM Framework — view-model strategies (compile-time GenerateViewModel source generator, runtime POCO ViewModelSource, ViewModelBase, BindableBase), DelegateCommand/AsyncCommand, predefined services (IMessageBoxService, IDialogService, IDocumentManagerService, INotificationService, INavigationService, IDispatcherService), behaviors (EventToCommand, KeyToCommand, FocusBehavior, ConfirmationBehavior), and view-model communication (ISupportParameter, ISupportParentViewModel, Messenger). Use when choosing a view-model strategy (recommend compile-time GenerateViewModel for new projects); wiring commands via [GenerateCommand]/[Command]; calling services via GetService<T>(); adding behaviors via dxmvvm:Interaction.Behaviors; or passing data between view models. Also use when someone mentions "ViewModelSource", "DXMessageBoxService", "DialogService", "EventToCommand", "Messenger.Default", "DevExpress.Mvvm", or "dxmvvm:".Other★ 66
- devexpress-wpf-tab-controlDevExpress/agent-skillsBuild WPF tabbed UIs with DevExpress DXTabControl — define tabs explicitly as DXTabItem children or generate them from a data collection via ItemsSource + ItemHeaderTemplate / ItemTemplate, pick one of three views (MultiLine, Scroll, Stretch) for how headers overflow, customize colors per tab (AccentColor/BorderColor), and template every region of the control (left/right control box, content header/footer, panel area). Use when building document tabs, settings panes, master-detail editors, or any tabbed-page UI in WPF. Also use when someone mentions "DXTabControl", "DXTabItem", "TabControlMultiLineView", "TabControlScrollView", "TabControlStretchView", "TabContentCacheMode", "AccentColor", "AllowHide", "Glyph", "PinMode", or "DragDropMode". The host window should be ThemedWindow (not Window) for proper visual integration. Covers .NET 8+ and .NET Framework 4.6.2+.Design★ 66
- design-to-codenahid-sparktales/agent-dispatcherTurn a design, mockup, Figma frame or screenshot into implementation that actually matches it — mapping values to the codebase's existing tokens and components, covering the states the design never drew, and listing what the design left ambiguous instead of guessing. Use when handed a design to build, when asked whether an implementation matches its source, or when a build has drifted from the design. Not for deciding what the design should be, and not by itself proof that the screen works.Design★ 59
- design-fixhashgraph-online/awesome-codex-pluginsCompare one already-implemented screen or component against its Figma source and fix the deviations you pick -- reads the node live through the figma-bridge MCP, or from the Node Specs of an existing /design plan, then diffs box, layout, typography, fill, stroke, radius, effects, and content against the code that renders it. Reports first, fixes only what you select, and never touches Figma.Design★ 1.4K
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in